AngularJS基础学习

来源：互联网发布：oracle倒入sql文件编辑：程序博客网时间：2024/06/05 17:56

1.AngularJS的历史

AngularJS是一款开源JavaScript库，由Google维护，用来协助单一页面应用程序运行的。它的目标是通过MVC模式（MVC）功能增强基于浏览器的应用，使开发和测试变得更加容易。AngularJS是由Google的员工Miško Hevery从2009年开始着手开发，版本1.0是在2012年发布的。

2.AngularJS的运行原理

利用AngularJS，开发者可将页面的一部分封装为一个应用，并且不强迫整个页面都使用AngularJS进行开发。这个特质在某些情况下非常有用，比如你的工作流程中已经包含了另外一个框架，或者你只希望页面中的某一部分是动态的，而剩下的部分是静态的或者是由其他JavaScript框架来控制的。

当在页面中通过<scriptsrc="lib/angular/angular.js"></script>引入Angular.js库时，这行代码载入Angular.js脚本，Angular.js中有自执行的函数。Angular.js脚本运行后将会寻找含有ng-app指令的HTML标签，该标签即定义了AngularJS应用的作用域，然后Angular会找ng-app所属标签下所有的Angular指令。说到底，Angular.js是根据页面上各种Angular指令去操作HTML元素，最终显示给用户的动态的HTML页面。

3.AnguarJS的几大特性：

（1）MVC

（2）模块化

var myModule = angular.module("HelloAngular", []);myModule.controller("helloAngular", ['$scope',    function HelloAngular($scope) {        $scope.greeting = {            text: 'Hello'        };    }]);

如上代码解析：

>>angular.module("HelloAngular", [])用来定义一个Angular模块，那么可以基于这个模块定义很多东西，例如controller等等，这样就避免将controller写到全局作用域中，污染全局作用域。

>>myModule.controller()在模块中定义一个controller，第一个是控制器的名称，第二个参数是一个数组，第一个$scope表示的是让AngularJS依赖注入$scope；$scope后面的controller的定义。

在开发AngularJS的应用时，首先想到的Module，因为controller，filter，directive等等都是挂载Angular模块下面的。一切都是从Module开始。一个module是由controller，filter，directive，model等等组成的，是一个功能的组合。

（3）指令系统

//HelloAngular_Directive.js

var myModule = angular.module("MyModule", []);myModule.directive("hello", function() {    return {        restrict: 'E',        template: '<div>Hieveryone!</div>',        replace: true    }});

//index.html

<!doctype html><html ng-app="MyModule"><head>    <meta charset="utf-8"></head><body>    <hello></hello></body><scriptsrc="js/angular-1.3.0.js"></script><scriptsrc="HelloAngular_Directive.js"></script></html>

备注，在html视图中，<hello></hello>会被替换成<div>Hieveryone!</div>

（4）双向数据绑定

单向数据绑定示意图：

双向数据绑定示意图：

（5）依赖注入

（6）service

（7）Filter

总结来说：

0 0