angularjs tutorial 怎么启动

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了angularjs tutorial 怎么启动相关的知识,希望对你有一定的参考价值。

参考技术A 请百度 ngnice.com,是一个angular 开源社区里面有很多angular 范例控件。 以及新手入门的介绍~

AngularJS入门

基本知识:http://www.runoob.com/angularjs/angularjs-tutorial.html

下载angularjs网址:http://www.bootcdn.cn/angular.js/

AngularJS概念:

1.MVC

封装数据代码(model),应用逻辑代码(controller),页面渲染数据代码(view),三层独立分离

Angular中,视图就是Documenet Object Model, 控制器就是Javascript类,数据模型就是存储在对象的属性中

2.数据绑定

数据绑定可以自动将model和view间的数据同步,Angular实现数据绑定的方式是把model作为数据源,view始终是model的投影,当model发生变化时,会自动反映在view上

3.依赖注入

Angular的依赖注入是获取它所需要的东西,而不创建它们所依赖的东西(一句话 ---> 没事你不要来找我,有事我会去找你。)

4.Angular数据绑定原理:使用脏检查比较数据是否发生了变化

知道变量发生变化一般有两种情况

(1)一是通过固定的接口改变值,如set()方法,缺点是写法繁琐,每个属性都要写一个set方法,

(2)二是脏检查,将对象复制一份快照,在某个时间比较现在对象与快照的值,如果不一样就说明发生了变化,这个策略要保留两份,而且要遍历对象,比较每一个属性,比较消耗性能。angular中所有带ng-开头的事件执行后,都会触发脏检查

页面动态显示时间例子

demo_01.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div ng-app>
        <div ng-controller="firstController">
            <div ng-bind="date"></div>
        </div>
    </div>
    <script type="text/javascript" src="../common/angular/angularjs.js"></script>
    <script type="text/javascript" src="demo_01.js"></script>
</body>
</html>

demo_01.js

/**
 * Created by Administrator on 2017/7/21.
 */

var firstController = function($scope){
    //new 一个时间
    $scope.date = new Date();

    //每隔一秒执行一次
    setInterval(function () {
        //通过 $apply 方法进行脏检查,从而动态改变页面数据
        $scope.$apply(function () {
            $scope.date = new Date();
        });
    },1000);
}

 $apply() 说明:

 $apply()只是进入angular的上下文中,通过 $digest() 方法去触发脏检查,在调用 $digest() 方法时,angular会先执行angular的 $eval() 方法,如果 $eval() 解析失败会抛异常,所以不建议直接调用 $digest() 方法,而应该使用 $apply() 方法,先让 $eval() 方法进行校验,数据合法了再执行下文, $apply() 如果不给参数,会检查$scope里所有监听的属性,推荐给上

 $digest() 说明:

所有 $scope 和 $scope的子类会进行脏检查,脏检查又会触发 $watch() 方法,这样实现了数据的双向绑定

 $watch() 说明:

angularJs内部的wath实现了页面随model的变化而变化,在  $digest() 方法执行时,如果  watch 观察的 value 与上次执行不一样时,就会被触发

 

以上是关于angularjs tutorial 怎么启动的主要内容,如果未能解决你的问题,请参考以下文章

angularjs启动项目报ERROR in AppModule is not an NgModule解决方法

怎么利用nodejs启动angularjs

angularjs中用ng-repeat生成几个radio,怎么设置radio的默认选中项

angular 放到tomcat怎么启动

Python 3.4.4 学习笔记(004)python manuals/the python tutorial -- 3. An Informal Introduction to Python(示例

电脑开机出现An operating system是怎么回事?