In this article I am going to introduce step-by-step the basics of using AngularJS. Lets start with the basic file structure in AngularJS.
Here, app.js
is a JavaScript file in which I created an instance of an Angular module. The controller.js
Javascript file has an Angular controller that is registered with the app.js
Angular module and contains business logic (programming between end UI and database). index.html
is the view page where I place my html code and loaded app.js
and then controller.js
script files.
Let's implement app.js
first.
1var app = angular.module('myApp',[]);
The angular.module is a global place for creating, registering, and retrieving Angular modules. Modules are containers for the various parts of an application, such as controllers and directives.
1// Create a new module
2var myModule = angular.module('myModule', []);
3
4// Register a new controller
5myModule.controller('myController',['$scope',function($scope){}])
6
7// Configure existing services inside initialization blocks.
8myModule.config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) {
9
10}]);
The angular.module
is the entry point of Angular applications. Each application has just one module that gets the rootElement <html>
or <body>
tag.
We created an angular.module
called myApp
in app.js file.
1app.controller('myCtrl',['$scope', function($scope) {
2 $scope.name = 'Angular ';
3}]);
In controller.js
, we register our Controller with the angular.module
(i.e app
) initialized in app.js
app.controller
has two parameters: the name of our controller and the required angular services/dependencies
. For example, we loaded the $scope
service and created an instance in the function.
Scope is a pre-defined object in Angular which uses $watch
to watch the status of model. It's importnant to know that $scope
has hierarchical structure, so scope inherits from its parent scope and is capable of creating child scopes.
1// parent scope
2var parent = $rootScope();
3
4// child scope
5var child = parent.$new();
Using $scope
(and its built-in $watch
command), we can bind html and js, causing changes in html to translate to changes in our js, and vice versa. In our example, we created a scope object called $scope.name
and finished binding in view(html page).
1<html ng-app="myApp">
2
3 <head>
4 <title>AngularJS App</title>
5 <script data-require="[email protected]" src="https://code.angularjs.org/1.4.9/angular.js" data-semver="1.4.9"></script>
6 <script src="app.js"></script>
7 <script src="controller.js"></script>
8 </head>
9
10 <body ng-controller="myCtrl">
11
12 <input ng-model="name" />
13 <p>Hello {{name}} !</p>
14
15 </body>
16
17</html>
When index.html
is loaded, it injects angular.js
, app.js
, and controller.js
into the browser per our defined script from index.html
. As a result, angular.module
is placed at rootElement, and myApp
and MyCtrl
become available for index.html
.
1<html ng-app="myApp">
Angular has Directive components such as ngBind, ngValue, nclass
and many more. In this article I explained just some of the ngApp
and ngController
directives. I will talk about other directives in my next tutorial.
ngApp is Angular's pre-defined directive, meaning that Angular will default to ngApp if no other directive is present.
If
ngApp
is not placed inrootElement
, then the controller will fail to load. This failure arises becausecontroller(myCtrl)
is registered withngApp("myApp")
, the unspecified default option.
1 <body ng-controller="myCtrl">
The ngController directive binds the controller class to the view. This is a key aspect of how Angular supports the principles behind the Model-View-Controller (MVC) design pattern.
Model — Models are data assingned to scope
variable for the Document Object Model (DOM), and consumed by API $watch
.
View — The html template that rendered and bound to the value in DOM.
1<body ng-controller="myCtrl">
2 <input ng-model="name" />
3 <p>Hello {{name}} !</p>
4</body>
{{name}}
serves as a variable to store the $scope.name
value present in the ngController myCtrl
.
1<input ng-model="name" />
ng-model provides a unique two-way-binding feature; it binds value to input.
Expressions are used to get or print the values of variables in the view. Direct directives appropriate the scope value for interpolation binding. However functionExpressions fail on this task. For Example:
1// work for
2<p>{{scopeValue}}</p>
3
4// fail for
5<button ng-click="{{functionalExpressions()}}">Click me !</button>
6
7// for directive used directly
8<button ng-click="functionalExpressions()">Click me !</button>
9<input ng-model="name" />
Anything written in input tag
will be observed by scope API $watch
and will display the value of the $scope.name
object in paragraph tag.
1<p>Hello {{name}}!</p>
See plunker for live example.
This is how we implement angular.module
, register ngController to the Angular module, and use the scope variable with the controller and the view to bind with AngularJS's ngModel.
I hope you found this article informative! See you soon with my next article on AngularJS.