【笔记】AngularJs学习笔记[02]【实践回顾与知识点归纳】

上一篇中,我们介绍ng的数据绑定的方法,不知道你是否能给吸收。想了一下,为了在ng入门之前能够帮助大家打好基础,所以在这篇中我就用一个例子来解析ng,并归纳一下ng的知识点。

【笔记】AngularJs学习笔记[02]【实践回顾与知识点归纳】_第1张图片

案例解析

<html ng-app>

<head>
    <title>title>
head>

<body ng-controller='CartController'>
    <h1>订单:h1>
    
    <div ng-repeat='item in items'>
        
        <span>{{item.title}}span>
        
        <input ng-model='item.quantity' />
        
        <span>{{item.price|currency}}span>
        <span>{{item.price*item.quantity|currency}}span>
        
        <button ng-click="remove($index)">删除button>
    div>

    <script type="text/javascript" src="js/angular.js">script>
    <script type="text/javascript">
    //管理逻辑
        // $scope对象:用来把数据绑定到界面上的元素
        function CartController($scope){
            $scope.items=[{//定义一个items集合
                title:'水笔',
                quantity:8,
                price:3.95
            },{
                title:'毛笔',
                quantity:10,
                price:12.95
            }];
            //定义remove函数,将remove加到$scope中
            $scope.remove=function(index){
                $scope.items.splice(index,1);
            };
        }
    script>
body>
html>

希望在对这个例子进行了完整的注解之后,你能更清晰的理解ng的思路,并且希望您能亲自实践一下!实践是检验真理的唯一标准嘛~


知识点归纳

1.MVC
ng是基于MVC的js库,首先你要了解一下JS在MVC上的解析。

M:模型,包含应用当前状态的数据;
V:视图,显示模型中的数据;
C:控制器,管理模型与视图的关系。

用一张图来解释:

【笔记】AngularJs学习笔记[02]【实践回顾与知识点归纳】_第2张图片

现在是否对javascript的MVC模式有更清晰的认识呢。

OK,我们接下来将ng.

2.angularjs知识点

首先,你要使用ng来创建一个web应用,你必须做2件事:

(1)加载angularjs;(通常我们可以使用CDN加载angularjs,因为CDN是一种“脚本跨应用缓存”,即当用户有多个使用angularjs的应用时,ng只下载一次,不会再次加载CDN。)

(2)使用ng-app告知angular管理那一部分的DOM;

注释:如果在现有的一个应用中,希望使某部分用angularjs来管理,就在该部分的元素上加上ng-app,如

其次,在我们在$scope中创建数据的时候,应该使用“模型对象”的方式来包含数据,这样能避免在$scope对象中原型继承引起非预期的行为。

如:

var messages={};//定义一个messages对象
        messages.someText="hello world";//为messages的属性someText赋值
        function myController($scope){
            $scope.messages=messages;
        }

这样,我们就像数据包含在模型对象messages中啦~。

3、angular知识点——ng应用启动流程

angular应用的标准启动流程分为下列几步:

  1. 用户请求应用的第一个页面;
  2. 用户的浏览器发出一个HTTP链接到服务器,加载包含模板的index.html页面;
  3. angualr加载到页面,等待页面完全加载完成,然后寻找ng-app定义模板的边界;
  4. angular经过模板寻找标识符和捆绑,监听器和DOM操作完成了注册。同时,从服务器查询初始化数据,应用启动完成。
  5. 连接到服务器按需加载你额外需要展示给用户的数据。

如此下来,用angular结构化应用,将应用程序的模板和填充它们的数据分离啦~爽吧~~
这样一来,模板可缓存,在第一次加载后只有新数据加载到浏览器,提升了浏览器的性能。

4、angular常用指令

ng-bind、ng-model、ng-show/hide 、ng-if

ng-checked、ng-src、ng-href、 ng-class 、

ng-selected、ng-submit 、ng-change、 ng-disabled

这些常用指令一定要熟悉它们的用法,在实际工作中很常用到。关于指令的作用可以参考一下这篇文章:http://www.jb51.net/article/60733.htm


OK,关于ng入门的实践和知识点的归纳就到这里,如果还有哪些需要了解的欢迎留言~

每篇一语:

《致命魔术》中说过,“魔术三步骤——以虚代实、偷天换日、化腐朽为神奇”,波登在影片最后告诉安杰,对艺术的牺牲才是他的secret,这也诠释了魔术的最后一步骤。所以,当你想达到一个位置的时候,助你上去的是你付出的极大的代价。安杰只做到了前两部,而波登做到了,这就是波登最终活下来的原因吧。

【笔记】AngularJs学习笔记[02]【实践回顾与知识点归纳】_第3张图片

你可能感兴趣的:(javascript)