ng-app directive.
input type="text" ng-model="name" placeholder="Enter your name"The ng-model directive is used with input fields whenever we want the user to enter any data and get access to the value in JavaScript. Here, we tell AngularJS to store the value that the user types into this field in a variable called name.span ng-bind="name"ng-bind and the double-curly notation are interchangeable.
Modules are AngularJS’s way of packaging relevant code under a single name. For someone coming from a Java background, a simple analogy is to think of modules as packages.
An AngularJS module has two parts to it:
- A module can define its own controllers, services, factories, and directives. These are functions and code that can be accessed throughout the module.
- The module can also depend on other modules as dependencies, which are defined when the module is instantiated. What this means is that AngularJS will go and find the module with that particular name, and ensure that any functions, controllers, services, etc. defined in that module are made available to all the code defined in this module.
In addition to being a container for related JavaScript, the module is also what AngularJS uses to bootstrap an application. What that means is that we can tell AngularJS what module to load as the main entry point for the application by passing the module name to the ng-app directive.
angular.module('notesApp', []);
angular.module('notesApp',
['notesApp.ui', 'thirdCompany.fusioncharts']);
angular.module('notesApp');
The ng-app directive takes an optional argument, which is the name of the module to load during bootstrapping.html ng-app="notesApp"
An AngularJS controller is almost always directly linked to a view or HTML. We will never have a controller that is not used in the UI (that kind of business logic goes into services). It acts as the gateway between our model, which is the data that drives our application, and the view, which is what the user sees and interacts with.angular.module('notesApp', [])
.controller('MainCtrl', [function() {
// Controller-specific code goes here
console.log('MainCtrl has been created');
}]);
This is used to tell AngularJS to go instantiate an instance of the controller with the given name, and attach it to the DOM element.ng-controller="MainCtrl"
ng-controller="MainCtrl as ctrl"
{{ctrl.helloMsg}} AngularJS.
{{ctrl.goodbyeMsg}} AngularJS
angular.module('notesApp',[]).controller('MainCtrl',[function(){this.helloMsg='Hello ';vargoodbyeMsg='Goodbye ';}]);
variables that were defined on the
this keyword in the controller are accessible from the HTML, but local, inner variables are not.
Furthermore, any variable defined on the controller instance (on
this in the controller, as opposed to declaring variables with the var keyword like goodbyeMsg) can be accessed and displayed to the user via the HTML. This is basically how we funnel and expose data from our controller and business logic to the UI.as good practice, we avoid referring to thebuttonng-click="ctrl.changeMessage()"
this keyword inside the controller, preferring to use a proxy selfvariable, which points to this.
the
this keyword inside a function can be overridden by whoever calls the function. Thus, the this outside and inside a function can refer to two completely different objects or scopes.
Thus, it is generally better to assign the
this reference inside a controller to a proxy variable, and always refer to the instance through this proxy (self, for example) to be assured that the instance we are referring to is the correct one.AngularJS has a directive calleddivng-repeat="note in ctrl.notes"
ng-cloak, which is a mechanism to hide sections of the page while AngularJS bootstraps and finishes loading. AngularJS creates scopes or context for various elements in the DOM to ensure that there is no global state and each element accesses only what is relevant to it. These scopes have a parent-child relation by default, which allows children scopes to access functions and controllers from a parent scope.
