Angularjs notes for Professionals

ng-init
=
"name='World'"
>
Name

ng-model
=
"name"
/>
Hello, {{ name }}!

ng-bind
=
"name"
>


ng-init
=
" name = 'World' "
>
Note that ng-init should be used for demonstrative and testing purposes only. When building an actual application,
controllers should initialize the data.
Bind data from the model to the view on HTML controls. Bind an 

to the 
name
property with 
ng
-
model
4.

ng-model
=
"name"
/>

---

GoalKicker.com – AngularJS Notes for Professionals
7
Display content from the model using double braces 
{{
}}
5.
Hello, {{ name }}
Another way of binding the 
name
property is using 
ng
-
bind
instead of handlebars
"{{ }}"
6.

ng-bind
=
"name"
>
The last three steps establish the 
two way data-binding
. Changes made to the input update the model, which is
reflected in the view.
There is a difference between using handlebars and 
ng
-
bind
. If you use handlebars, you might see the actual
Hello
,
{{
name
}}
as the page loads before the expression is resolved (before the data is loaded) whereas if you use
ng
-
bind
, it will only show the data when the name is resolved. As an alternative the directive 
ng
-
cloak
can be used
to prevent handlebars to display before it is compiled.
Section 1.2: Showcasing all common Angular constructs
The following example shows common AngularJS constructs in one file:

ng-app
=
"myDemoApp"
>



src
=
"https://code.angularjs.org/1.5.8/angular.min.js"
>



ng-class
=
"{ 'started': hasStarted }"
ng-cloak
>

ng-controller
=
"demoController as vm"
>

---

GoalKicker.com – AngularJS Notes for Professionals
8

ng-repeat
=
"msg in vm.messages"
>{{ msg }}

ng-app
>
{{ 'Hello' + 'World' }}

ng-app
=
"test"
ng-controller
=
"ngListExample"
>

ng-model
=
"list"
ng-list
=
"; "
ng-trim
=
"false"
>
ng-cloak>
 
ng-controller
=
"hideShowController as vm"
>
 
style
=
"cursor: pointer;"
ng-show
=
"vm.show"
ng-click
=
"vm.toggle()"
>Show Me!
 
style
=
"cursor: pointer;"
ng-hide
=
"vm.show"
ng-click
=
"vm.toggle()"
>Hide Me!

src = 
"http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"
>

src
=
"directive.js"
>

ng-app = 
"demoApp"
>


name
=
"World"
>


ng-controller
=
"mainAppController"
>


value1
=
"value1"
value2
=
"value2"
>


src
=
"js/angular.js"
>

src
=
"js/angular-sanitize.js"
>


src
=
"mainApp.js"
>


src
=
"resuableComponents/reusableModuleApp.js"
>

 
ng-app
=
"myApp"
>




ng-controller
=
"Controller"
>

username
=
"user"
reputation
=
"rep"
>

username
=
"user2"
reputation
=
"rep2"
>


ng-app
=
"app"
ng-controller
=
"mainCtrl as main"