AngularJs之初

标签：asc   blank   net   没有   好的   创建   结果   健全   idt   

　　很久以前就听人说起angularjs，但一直都没有深入了解过。直到最近才在自己心里有了一个准确的定义。和相濡以沫多年的函数库JQuery相比，angular更像一个框架。对，就是一个框架，相比之下的话同样是前端开发框架的Ext就应该是一个胖子，而angular就是一个瘦子。Ext提供了一套几乎可以不写Html和Css就能创造页面的解决方案，除此之外还包括页面的逻辑和数据处理方案。angular则只提供了页面逻辑和数据处理的方案。也许和Ext相比它算是一个“不健全的”前端框架，但这也大大的提高了框架使用的灵活性。

我是怎么入门的？

　　了解类似框架，最头疼的是找不到好的突破口。很多时候我们都希望能看到一个简单的案例，通过案例可以对框架有一个清晰的认识。在github上有个angular-seed的代码库，以一个最简单的案例介绍了angular打开方式。附代码地址:https://github.com/angular/angular-seed.git

　　悄悄的说一下，如果使用WebStorm做开发，在创建项目的时候可以选择AngularJs，WebStorm会自动下载angular-seed。就像.Net程序员在创建MVC项目的时候VS会自动填充一些基础代码。

　　安装好的项目结构如下：

　　项目介绍：

　　红色框选部分是重点，新手可以忽略其他文件。

　　这是一个单页应用，index.html是页面入口，app.js是angularjs配置文件。

　　所以在访问的时候我们应该访问的是：http://xxx.xxx.xxx/index.html

　　components -- 资源文件夹（强迫症患者可以重命名或将对应资源移动到其他文件夹下）

　　view -- 存储视图（内容页）和 viewmodel（view.js） 。

　　　　　　view.js包含路由（页面的访问路径配置）和控制器（controller）。

　　　　　　页面中需要用到的变量等相关信息需要在controller中配置。

　　　　　　目前是空的

　　view1和view2分别存储的是两个视图，运行后访问index.html即可访问。

重点照顾对象：

　　app.js 

　　　　app.js中angular.model函数的第二参数是一个数组，这个数组里列举的内容便是整个项目运行时依赖内容，比如：view1.js，view1.js中定义的angular.model名称为myApp.view1，可以将其理解为是view1.js这个模块的命名空间，那么在设置app.js的时候就需要加入这个命名空间。如果新建一个myApp.view10那么app.js里便需要加入对myapp.view10的引用。

　　　　除此之外app.js里还设置了一个默认地址otherwise,这个有点404的感觉，当找不到对应页面的时候就会跳转到这个地址上，这里默认的是view1。所以在访问index.html的时候会直接访问到view1.html。

　　　　请注意，app.js里$routeProvider.otherwise({redirectTo:‘/view1‘})，这里的/view1并不是view1.html，而是路由配置表里的一个路径/view1,而在view1.js中将这个路径指向了view1.html。这两者的对应关系是建立在页面路由上的。

 　　index.html

　　　　这是一个看似简单却暗藏玄机的页面。首先是这一句<div ng-view></div>, ng-view指令表示，所有页面都将在这里展示,感觉就像老朋友iframe。

　　　　除此之外页面上所需要的js资源都需要在这里加载

 关于Hello Word：

　　上效果~~

　　下面是对view1.html的修改和运行结果。

<p>This is the partial for view 1.</p>
<input type="text" ng-model="word">
<h3>{{word}}</h3>

‘use strict‘;

angular.module(‘myApp.view1‘, [‘ngRoute‘])

.config([‘$routeProvider‘, function($routeProvider) {
  $routeProvider.when(‘/view1‘, {
    templateUrl: ‘view1/view1.html‘,
    controller: ‘View1Ctrl‘
  });
}])

.controller(‘View1Ctrl‘, [function() {
    var word= this.word;
}]);

<p>This is the partial for view 2.</p>


<h2>ng-repeat部分</h2>
<div ng-repeat="item in list">
  这是{{item}} 它的index是：{{$index}}
</div>

‘use strict‘;

angular.module(‘myApp.view2‘, [‘ngRoute‘])

.config([‘$routeProvider‘, function($routeProvider) {
  $routeProvider.when(‘/view2‘, {
    templateUrl: ‘view2/view2.html‘,
    controller: ‘View2Ctrl‘
  });
}])

.controller(‘View2Ctrl‘, [‘$scope‘,function($scope) {
    $scope.list=["item1","item2","item3","item4"];
}]);

AngularJs之初

标签：asc   blank   net   没有   好的   创建   结果   健全   idt   

原文地址：http://www.cnblogs.com/aser1989/p/6773047.html