We can refer the above diagram to discuss the architecture of Angular2.
1) Every single page will live inside a module.
2) Every single page will get its UI from template.
3) This UI will be controller by component for that module.
4) This component can use services, directive and other third part libraries.
Angular 1 Notes:-
Directives --> extended html attributes with prefix ng
ng-model --> bind html component value to application data like scope variables in angular controller. This binding is two way. It also provides the following:-
<form ng-app="" name="myForm" ng-init="myText = 'post@myweb.com'">
Email:
<input type="email" name="myAddress" ng-model="myText" required>
<h1>Status</h1>
{{myForm.myAddress.$valid}} // This check if the email address is valid
{{myForm.myAddress.$dirty}} // This check if the email address has been changed
{{myForm.myAddress.$touched}} //This check if the email address has been touched
</form>
The above example shows how validation works in angular
ng-init --> Intializes application data.Usually in an enterprise app, we don't use it. Instead we use controllers.
ng-app --> This is a directive which intializes an application as angular js app. when we declare in index.html <body ng-app="gt_dem">, it basically creates tags in html with gt_dem and encloses every angular stuff for that app in between those tags.Also, it auto-bootstrap (automatically initialize) the application when a web page is loaded.
ng-bind
ng-repeat --> It is a directive used over an array of objects.
ng-show/ng-hide --> This is an attribute which can be used in html and acts as if condition and on being true performs what ever is inside the tag.Basically hide/show a html.
Data Binding --> It evaluates matematical exprressions in parenththesis {{}}
ng-bind also do the same thing by showing the value of say scope variable in html
We use data binding with ng-model. Also use scope/controller variables to evalute in those parenththesis.
ng-controller --> This is a directive which defines a controller. We invoke/control controller using scope.
Scope :- They are of two types --> scope and rootscope
ng-options -- directive to create drop down
ng-repeat -- directive to create table
ng-disabled -- directive disbales soemthing
Angular also has some events which can trigger some function based on some event like ng-click, ng-blur etc . We can also pass $event as a function parameter called by event.
Setting up angular on Mac:-
If you get an error while installing npm install -g @angular/cli ,then follow below steps:-
Make a directory for global installations:
mkdir ~/.npm-global
Configure npm to use the new directory path:
npm config set prefix '~/.npm-global'
Open or create a ~/.profile file and add this line:
export PATH=~/.npm-global/bin:$PATH
Back on the command line, update your system variables:
source ~/.profileAfter this, try installing it again.
No comments:
Post a Comment