AngularJs开发实践第一天（１）

　　　这阵子公司项目准备重构，原来的前端用的是AngularJs框架，这对于一向不擅长前端的我来说算是个挑战，但必须熟悉它才能对架构进行优化和分解，为了公司的需

要，和自己所担负的责任，只有一个字：上。这几天也看了一些基础教程和一些代码，为了消化和理解，也就再逼着自己做一些学习总结吧，大牛轻拍。好的，闲归正传，下面和

以后我会把我觉着比较容易理解和入门的教程和案例，加入自己的理解，整理。

　　　今天第一篇，我准备重点把我看到的一篇AngularJS入门英文文档翻译和整理。

　　　AngularJS是一个MVC JS框架，建立三个文件，如下：其中，main.crtl.js就是Controller, app.js就是model，index.html就是view，在后面随着对AngularJS的理解深

入，大家可以发现很多熟悉的概念，比如：指令、依赖注入、作用域、事件广播等，及视图和业务分离很清晰的设计思想，当然还有设计模式。

　　　app.js的代码如下，它声明一个model对象

　　

　　

　　　main.ctrl.js代码如下，它声明一个controller对象，名叫：MainController，后面的函数体它主要处理页面的业务逻辑和控制数据在视图上的展示。

　　　

　　index.html就是普通的html文件，在这个示例中，它里面引入了Angularjs库和Bootstrap CSS框架。这里我们主要关注AngularJS.它的代码如下：

　 

　这里，我们可以重点看下指令:ng-app指令，它表明这个html中body的dom数据都由一个叫：app的模型来管理；ng-controller指令，它表示页面中的dom元素的数据绑定由MainController来控制，as main，是帮MainController取的别名。

  

  接下来，我们来理解AngularJS中的一些很重要的概念。第一个是:$scope，在AngularJS中它就叫：作用域，我们可以把它理解成上下文环境，在AngularJS中所有的自带服务，比如$q,$http等都可以注入$scope。下面这代码，说明的是：index.html中读取当前controller范围(scope)内的变量

  

 第二个是：数据双向绑定。这个特点我以为是AngularJS很强大的一个功能，但也最让人产生困惑的功能。代码示例如下：

　在Controller中声明一个变量：searchInput

　在index.html中用:ng-model指令来绑定controller中的searchInput变量,这样，在index.html中的文本框中取入值，就会绑定在searchInput变量中，在contorller中就可以读取searchInput变量，

相反，在controller中修改searchInput变量的值，在index.html页面中也可以直接体现，这也就是：双向数据绑定。

   好了，第一篇大概就讲这些吧，主要是了解AngularJS开发的基本流程，后面的遍历指令：ngRepeat、事件、表单验证等就不一一说了，大家感兴趣的可以阅读此英文文档，文档地址可参见：http://www.revillweb.com/tutorials/angularjs-in-30-minutes-angularjs-tutorial。