1. AngularJS is a very powerful JavaScript Framework. It is used in Single Page Application (SPA) projects.
2. Definition：
AngularJS is a structural framework for dynamic web apps. It lets you use HTML as your template language and lets you extend HTML's syntax to express your application's components clearly and succinctly. Angular's data binding and dependency injection eliminate much of the code you currently have to write. And it all happens within the browser, making it an ideal partner with any server technology.
3.The AngularJS Components
The AngularJS framework can be divided into following three major parts −
ng-app − This directive defines and links an AngularJS application to HTML.
ng-model − This directive binds the values of AngularJS application data to HTML input controls.
ng-bind − This directive binds the AngularJS Application data to HTML tags.
Ex1.
<!doctype html> <html ng-app> <head> <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.3/angular.min.js"></script> </head> <body> <div> <label>Name:</label> <input type = "text" ng-model = "yourName" placeholder = "Enter a name here"> <hr /> <h1>Hello {{yourName}}!</h1> </div> </body> </html>
Ex2
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.17/angular.min.js"></script>
</head>
<body ng-app="myapp">
<div ng-controller="HelloController">
<h2>
Welcome {{helloTo.title}} to the world of Tutorialspoint!</h2>
</div>
<script>
angular.module("myapp", [])
.controller("HelloController", function($scope) {
$scope.helloTo = {};
$scope.helloTo.title = "AngularJS";
});
</script>
</body>
</html>
Include AngularJS
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
Point to AngularJS app
<body ng-app="myapp">
</body>
View
<script div ng-controller="HelloController">
<h2>
Welcome {{helloTo.title}} to the world of Tutorialspoint!</h2>
</div>
Controller
<script>
angular.module("myapp", [])
.controller("HelloController", function($scope) {
$scope.helloTo = {};
$scope.helloTo.title = "AngularJS";
});
</script>
沒有留言:
張貼留言