angularjs入门学习一【核心理念】

                                                                                                          angular中常见的核心理念

一、客户端模版

   在传统多页面web应用程序通过组装和拼接数据来创造HTML(后台进行相关操作,并形成HTML页面),并将之发送至浏览器进行页面解析。而某种程度上Ajax应用(即单页面应用,异步更新)也可以实现对浏览器页面传送更新(局部)。而Angular则是后台将数据和模版传送到浏览器,然后再在浏览器中进行组装、解析页面内容。而这一过程中服务器仅作为提供页面静态资源和所需数据而存在。


在这里通过一个小小的例子来简单的描述下

<html ng-app> 
<head>
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
  <script src="controllers.js"></script>
</head>
<body>
  <div ng-controller='HelloController'>
    <input ng-model='greeting.text'> 
    <p>{{greeting.text}}, World</p>
  </div>
</body>
</html>


下面是controllers.js代码

function HelloController($scope) {
  $scope.greeting = { text: 'Hello' };
}
运行结果:



         而当在input中进行输入时,你会惊奇的发现,Hello字段会即时的更新为你所输入的文本内容,而这一些得益于其双向的数据绑定特性,而其数据绑定通过ng-model和{{}}双大括号进行绑定(在这里不做详细解释)。

        在上述例子中,我们可以很轻易的发现,浏览器不是直接输出Hello,World的字符转换,而是组织了可以改变的‘Hello",而个人理解是’,World'部分作为模版中的内容固定不变,而我仅仅去改变我们需要的Hello文本部分内容。


      而与我们当前使用的很多方法比较,我们可以发现angualr的一些特别之处:

    【1】无需用class或id来区分绑定的事件监听

    【2】在HelloController中设置greet.text为hello时,并未进行事件的注册监听,也没有写任何回调函数

    【3】HelloController仅作为一个普通的js类,并未继承angular提供的任何东西,也无需创建$scope对象来进行数据获取


二、模型(model)-视图(view)-控制器(controller)------MVC

   【1】MVC核心理念:在的代码之间 明确分离管理数据(模型),应用程序逻 辑( 控制器),并将数据给用户视图

             在angular中视图层就是DOM,控制器js类,模型数据存储在对象属性中。

   【2】MVC优点:代码结构组织清晰,易于理解和程序的扩展,维护和测试

三、数据绑定

   概念理解: 将页面中某一部分映射到js属性,让其自动同步,数据的移动从一个地方到另一个地方也是大部分自动完成【结合上述例子进行理解】  

四、依赖注入(DI):一种软件设计模式,用来处理代码间依赖关系

   特性:由外接依赖注入,无需主动需要和寻找依赖,即不用通过new来创建对象便可以使用对象,如上例中的$scope对象

五、指令

通过框架核心中包含的DOM转换引擎,可以进行HTML语法的扩展,而如ng-controller,ng-model均为其HTML扩展指令。而其自带的很多标识符也可以帮助我们定义试图。


六、下面通过借用别人的一张图来给展示angularjs内核结构各层关系



个人暂时还不能很好理解,所以 不做解释,待后面理解清楚再做解释,如果有高手可以帮我这个解答下的话,麻烦不要吝啬你的评论了哦~~~


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章