Angular.js is a structural framework for dynamic web apps.
It aims to make HTML a language as declarative in dynamic documents as it is for static.
<!-- angular directive example -->
<banner-pic></banner-pic>
^
|
|
<div class="bannerpic-xl">
<img src="../assets/img/bannerpic.png"/>
</div>
"Angular is built around the belief that declarative code is better than imperative when it comes to building UIs and wiring software components together, while imperative code is excellent for expressing business logic."
source - docs.angularjs.doc
Angular was built with CRUD application in mind, luckily it's CRUD applications that represent the majority of web applications !
& Remember Angular allows for easier development of these applications by offering the developer ...
and many more ...
Angular simplifies application development by presenting a higher level of abstraction to the developer, but this abstraction comes at the cost of flexibility. In other words angular is not the best fit for every application.
Applications which need intensive DOM manipulation is beyond the scope of Angular.js framework.
Angular.js Framework
Other Frameworks or Libraries
You can include angular.js in your project couple of different ways.
CDN
https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular.jsPackage Manager
bower install angular<script type="text/javascript" src="/bower_components/angular/angular.min.js"></script>
ng-app attribute
<!doctype html>
<html ng-app >
<head>
<script type="text/javascript" src="/bower_components/angular/angular.min.js"></script>
</head>
<body></body>
</html>Am I violating HTML standards ?
<!doctype html>
<html data-ng-app >
<head>
<script type="text/javascript" src="/bower_components/angular/angular.min.js"></script>
</head>
<body></body>
</html>Ohh yeah, much better !
Automatic Initialization
<html data-ng-app="myApp"></html>Manual Initialization
<script>
angular.element(document).ready(function(){
angular.module('myApp', []);
angular.bootstrap(document, ['myApp']);
});
</script>Markup
<body ng-app='TestDrive'>
<div ng-controller='testCtrl'>
<div>Name: <input type='text' ng-model='name' /></div>
<div>Age: <input type='number' ng-model='age' /></div>
<div><p>Hi, my name is {{name}} and i'm {{age}} years old.</p></div>
</div>
</body>JS
<script>
var testDrive = angular.module('TestDrive',[]);
testDrive.controller('testCtrl', function($scope){
$scope.name = '';
$scope.age = '';
});
</script>The angular framework thrives on being modular.
Each ng-app is a module which depends on other modules and inherits their services, factories, constants, directives and filters.
From last versions, Angular.js was split in modules:
ngRoute, ngAnimate
Sample
angular.module('alertModule', [])
.service(function () {
this.showAlert = function (msg) {
alert(msg);
}
})Module's injected as dependencies into other modules.
var demoAlert = angular.module('demoAlert', ['alertModule']);
demoAlert.controller('alertCtrl', function($scope, alertService) {
$scope.clicked = alertService.showAlert.bind(alertService, 'test');
});<div data-ng-app="demoAlert" data-ng-controller="alertCtrl">
<button data-ng-click="clicked()">Push me</button>
</div>The angular DI is based on component names.
demoApp.controller('demoController', function ($scope, $timeout, $q) {});How to overcome this issue ?
demoApp.controller('demoController', ['$scope', '$timeout', '$q',
function ($scope, $timeout, $q) {
}]);They are the behaviour behind the DOM elements and let you relax about updating the DOM, register callbacks or watch model changes.
Your logic is one level higher than DOM manipulation.
$scope is an object that refers to the application model. It is an execution context for expressions. Scopes are arranged in hierarchical structure which mimic the DOM structure of the application. Scopes can watch expressions and propagate events
angularApp.controller('ctrlName', ['$scope', function ($scope) {
// application logic
}]);<div data-ng-controller="ctrlName">
<!-- application markup -->
</div>
scopeDemoApp.controller('demoCtrl', function ($scope) {
$scope.text = 'Hi How are you, ';
$scope.obj = { who: 'Random Citizen' };
$scope.func = function () {
$scope.obj.who = 'My Special Person !';
}
});<div data-ng-controller="demoCtrl">
{{ text }} {{ obj.who }}! <br />
<button data-ng-click="func()">Switch Greet</button>
</div>
Each web application you build is composed of objects that collaborate to get stuff done. These objects need to be instantiated and wired together for the app to work. In Angular apps most of these objects are instantiated and wired together automatically by the injector service.
Classes? Objects? Functions? Constants?
Simple and Usefull
myApp.constant('NAME', value);Example
myApp.constant('APIKEY', '0123456789');You can also use it to save objects like so :
myApp.constant("myConfig", {
"url": "http://localhost",
"port": "80"
});module.factory('userService', function(){
var fac = {};
fac.users = ['John', 'James', 'Jake'];
return fac;
});Services and Factories are singleton object's that can be used through out an angular app injected into a controller, factory or directive.
var module = angular.module('myapp', []);
module.service('userService', function(){
this.users = ['John', 'James', 'Jake'];
});If your app is so complicated that needs a configuration phase, your services can be providers.
myApp.provider('helloWorld', function() {
this.name = 'Default';
this.$get = function() {
var name = this.name;
return {
sayHello: function() {
return "Hello, " + name + "!"
}
}
};
this.setName = function(name) {
this.name = name;
};
});//hey, we can configure a provider!
myApp.config(function(helloWorldProvider) {
helloWorldProvider.setName('World');
});
$http({
method: 'GET',
url: '/someUrl'
}).success(function(data, status, headers, config) {
// Some stuff
}).error(function(data, status, headers, config) {
// Other stuff
});If jQuery is available, angular.element is an alias for the jQuery function. If jQuery is not available, angular.element delegates to Angular's built-in subset of jQuery, called "jQuery lite" or "jqLite."
and may more .......
By Eshwaran Veerabahu
A beginners intro into Angular.js