AngularJS初探(一)

AngularJS初探(一)

AngularJS作为一个小而精的框架,在UI设计和页面逻辑交互上有他天然的优势,为Web程序员提供了一种快捷开发的选项,更何况还有google这个干爹呢!
作为一名AngularJS的初学者,我于此记录下我的学习过程。

要点

  • 依赖注入
    依赖注入从某种程度上说是为了给控制器分级,是控制逻辑的注册和分级,这样,不同的module掌控了不同的service和factory,他们之间可以通过继承和覆盖来完成一个层次上的分级功能。
  • directive
    directive是集成自己的页面元素和内里的控装逻辑,代码复用的一种方便的方式,封装和集成的完美体现
var app=angular.module('myApp',[]);
app.directive('footMenu',function(){
 return {
     restrict:'E',
     transclude:true,
     scope:{},
     controller:'footCtrl',
     templateUrl:'/footMenu.html'
 };
});

上面展示了一个directive的定义过程

  • Service,factory,value
    MVC模型在业界已经是大名鼎鼎,也有人说AngularJS是MVMM模型,小生愚钝,这两个都不怎么熟。但是把界面和控制逻辑分离,确实是非常伟大的举动。我现在在做一个APP,把View提前写好,再把交互逻辑加入,最后把与服务端交互的逻辑加入,是个看起来不错的开发逻辑。让我们再回来看看controller吧。通过controller我们把一些控制逻辑与HTML的特定元素绑定,实现了不同控制逻辑的分离。
app.contrller('myCtrl',function($scope</span>,<span class="hljs-variable">$location){
  $scope.redirect=function(destination){
      $location.path(destination).replace();
  };
});

<div ng-controller="myCtrl">
  <button ng-click="redirect('/hh')">go</button>
</div>

上文定义了一个按钮上的跳转逻辑,这个controller起作用的就是div包裹的区域

Over

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • AngularJS是什么?AngularJs(后面就简称ng了)是一个用于设计动态web应用的结构框架。首先,它是...
    200813阅读 1,632评论 0 3
  • 通过AngularJS仿豆瓣一刻的案例:https://github.com/zhongxiaolian/doub...
    中小恋阅读 1,781评论 1 21
  • 1、angularjs的几大特性是什么? 双向数据绑定、依赖注入、模板、指令、MVC/MVVM 2、列举几种常见的...
    2e9a10d418ab阅读 1,381评论 0 10
  • ng-model 指令ng-model 指令 绑定 HTML 元素 到应用程序数据。ng-model 指令也可以:...
    壬万er阅读 889评论 0 2
  • 1、angularjs的几大特性是什么? 双向数据绑定、依赖注入、模板、指令、MVC/MVVM 2、列举几种常见的...
    秀才JaneBook阅读 1,555评论 0 22