用angularjs开发下一代web应用(二):angularjs应用骨架(一)

1.调用angularjs

     1>加载angularjs库

     可以从google的CDN(内容分发网络)中加载,获取快,并且可以在多个应用之间缓存脚本库(建议使用这种方式,但是中国的特殊国情,不能用这种方式):

     本地主机方式。

     2>使用ng-app申明angular的边界

2.MVC

   定义控制器的正确方式是,把它定义成模块的一部分,控制器可以为应用里面相关的部分提供命名空间机制。模块可以将东西从全局命名空间隔离开。



{{someText.message}}

3.模板和数据绑定

    基本的运作流程如下。
              1.用户请求应用起始页。
              2.用户的浏览器向服务器发起一次HTTP连接,然后加载index.html页面,这个页面里面包含了模板。
              3.Angular被加载到页面中,等待页面加载完成,然后查找ng-app指令,用来定义 模板边界。
              4.Angular遍历模板,查找指令和绑定关系,这将触发一系列动作:注册监听器、执行一些DOM操作、从服务器获取初始化数据。这项工作的最后结果是,应用将会
                    启动起来,并且模板被转换成了DOM视图。
              5.连接到服务器去加载需要展示给用户的其他数据。对于每一个Angular应用来说,步骤1到步骤3都是标准化的,步骤4和步骤5是可选的。

       这些步骤可以同步进行也可以异步进行。为了提升性能,对于应用中的第一个视图,你可以把数据和HTML模板一起加载进来,从而避免发起多次请求。
4.显示文本

     使用ng-bind指令,你可以在UI中的任何地方显示并刷新文本。它还有两种等价形式。
            第一种是使用花括号的形式:

{{greeting}}


          还有一种方式就是使用基于属性的指令,叫做ng-bind:

          虽然两种形式的输出内容相同,但是使用双花括号语法的时候,在Angular使用数据替换这些花括号之前,第一个加载的页面,也就是应用中的index.html,其未被渲染好的模板可能会被用户看到。而使用第二种方法的视图就不会遇到这个问题。

            在大多数模板中你依然可以使用{{  }}。但是,对于index.html页面中的数据绑定操作,建议使用ng-bind。

5.表单输入

   ng-model:将元素绑定到模型属性上。

   ng-change:指定一个控制器方法,一旦用户修改了输入值,此方法就会调用。

   $watch()函数来监视一个表达式,当这个表达式发生变化时就会调用一个回调函数。

    ng-submit、ng-click、ng-dblclick。

    

Starting: Recommendation: {{needed}}
function StartUpController($scope) { $scope.computeNeeded = function() { $scope.needed = $scope.startingEstimate * 10; }; $scope.requestFunding = function() { window.alert("Sorry, please get more customers first."); }; $scope.reset = function() { $scope.startingEstimate = 0; }; }


你可能感兴趣的:(angularjs)