用户名：雪飘七月
文章数：64
评论数：25
访问量：168109
注册日期：
阅读量：1297
阅读量：3317
阅读量：459085
阅读量：1143602
51CTO推荐博文
& & 首先，我们来看一下工程结构目录：& & 我们可以看到scripts中分列了一下几个文件夹：controllers、services、directives、filters、vendor，以及两个文件app.js和main.js。& & controllers里面主要就是控制器&&&services里面是服务，为控制器提供数据服务支持，与后台交互的代码就在其中& & directives是指令，用于生成自定义标签的html模板& & filters是过滤器，用于处理显示数据的形式& & vendor文件夹中存放的是引用的第三方js插件跟scripts同级的是styles和views文件夹，styles存放css样式文件，view存放html文件。& & 我们先来看一下index.html中的主要代码：&!DOCTYPE&html&
&html&&&!--&Do&not&add&ng-app&here&as&we&bootstrap&AngularJS&manually--&
&&&title&My&AngularJS&App&/title&
&&&meta&charset="utf-8"&/&
&&&link&rel="stylesheet"&type="text/css"
&&&&&&&&href="styles/bootstrap.min.css"&
&&&link&rel="stylesheet"&type="text/css"&href="styles/ng-grid.css"&/&
&&&link&rel="stylesheet"&type="text/css"&href="styles/main.css"&
&body&class="home-page&row-fluid"&
&nav&class="navbar&navbar-default"&
&div&class="col-lg-10&col-md-12&col-sm-12&col-sm-12&col-lg-offset-1"&
&&&&&div&ng-view&&/div&
&div&class="row-fluid"&
&&&script&data-main="scripts/main"
&&&&&&&&src="scripts/vendor/require.js"&&/script&
&/html&我们可以看到导入的js只有一个require.js，但是这个script中有个这样的属性&data-main="scripts/main"这个属性就将主js指向了scripts/main.js。下面来看main.js，其中，分为了两块，第一块是对第三方的引用和依赖配置：//&the&app/scripts/main.js&file,&which&defines&our&RequireJS&config
require.config({
&&&&paths:{
&&&&&&&&angular:'vendor/angular.min',
&&&&&&&&jquery:'vendor/jquery',
&&&&&&&&bootstrap:'vendor/bootstrap.min',
&&&&&&&&domReady:'vendor/domReady',
&&&&&&&&ngGrid:'vendor/ng-grid.debug'
&&&&shim:{
&&&&&&&&angular:{
&&&&&&&&&&&&deps:[&'jquery'],
&&&&&&&&&&&&exports:'angular'
&&&&&&&&},
&&&&&&&&ngGrid:{
&&&&&&&&&&&&deps:[&'jquery']
&&&&&&&&},
&&&&&&&&bootstrap:{
&&&&&&&&&&&&deps:[&'jquery']
});第二块就是主要的引用和route信息了：require([
&&&&'angular',
&&&&'app',
&&&&'domReady',
&&&&'bootstrap',
&&&&'services/userService',
&&&&'controllers/rootController',
&&&&'directives/ngbkFocus',
&&&&'controllers/user/listController',
&&&&'controllers/user/editController',
&&&&'controllers/user/newController',
&&&&'ngGrid'
&&&&//&Any&individual&controller,&service,&directive&or&filter&file
&&&&//&that&you&add&will&need&to&be&pulled&in&here.
&&&&function&(angular,&app,&domReady)&{
&&&&&&&&'use&strict';
&&&&&&&&app.config(['$routeProvider',
&&&&&&&&&&&&function&($routeProvider)&{
&&&&&&&&&&&&&&&&$routeProvider.when('/',&{
&&&&&&&&&&&&&&&&&&&&templateUrl:'views/user/list.html',//当跳转到该路径时，将此html嵌入到ng-view属性的dom中
&&&&&&&&&&&&&&&&&&&&controller:'ListCtrl'//当前templateUrl的controller为ListCtrl
&&&&&&&&&&&&&&&&})
&&&&&&&&&&&&&&&&&&&&.when('/edit/:name/:allowance',&{
&&&&&&&&&&&&&&&&&&&&&&&&templateUrl:'views/user/form.html',
&&&&&&&&&&&&&&&&&&&&&&&&controller:'EditCtrl'
&&&&&&&&&&&&&&&&&&&&})
&&&&&&&&&&&&&&&&&&&&.when('/new',&{
&&&&&&&&&&&&&&&&&&&&&&&&templateUrl:'views/user/form.html',
&&&&&&&&&&&&&&&&&&&&&&&&controller:'NewCtrl'
&&&&&&&&&&&&&&&&&&&&})
&&&&&&&&&&&&&&&&&&&&.when('/root',&{
&&&&&&&&&&&&&&&&&&&&&&&&templateUrl:'views/root.html',
&&&&&&&&&&&&&&&&&&&&&&&&controller:'RootCtrl'
&&&&&&&&&&&&&&&&&&&&});
&&&&&&&&&&&&}
&&&&&&&&]);
&&&&&&&&domReady(function&()&{
&&&&&&&&&&&&angular.bootstrap(document,&['MyApp']);//app名为MyApp
&&&&&&&&&&&&//&The&following&is&required&if&you&want&AngularJS&Scenario&tests&to&work
&&&&&&&&&&&&$('html').addClass('ng-app:&MyApp');//给html添加ng-app属性
&&&&&&&&});
);以list的route为示例，我们来讲解controller,先看一张list效果图（此处我们引用了ng-grid插件）：我们来看引入的controllers/user/listController：define(['controllers/controllers',&'services/userService'],
&&&&function&(controllers)&{
&&&&&&&&controllers.controller('ListCtrl',&['$scope',&'$http',&'$location',&'UserService',//此处数组中的参数依次对应下面回调方法中的参数
&&&&&&&&&&&&function&($scope,&$http,&$location,&UserService)&{
&&&&&&&&&&&&&&&&
&&&&&&&&&&&&&&&&$scope.mySelections&=&[];
&&&&&&&&&&&&&&&&$scope.filterOptions&=&{
&&&&&&&&&&&&&&&&&&&&filterText:"",
&&&&&&&&&&&&&&&&&&&&useExternalFilter:true
&&&&&&&&&&&&&&&&};
&&&&&&&&&&&&&&&&$scope.totalServerItems&=&0;
&&&&&&&&&&&&&&&&$scope.pagingOptions&=&{
&&&&&&&&&&&&&&&&&&&&pageSizes:[250,&500,&1000],
&&&&&&&&&&&&&&&&&&&&pageSize:250,
&&&&&&&&&&&&&&&&&&&&currentPage:1
&&&&&&&&&&&&&&&&};
&&&&&&&&&&&&&&&&$scope.setPagingData&=&function&(data,&page,&pageSize)&{
&&&&&&&&&&&&&&&&&&&&var&pagedData&=&data.slice((page&-&1)&*&pageSize,&page&*&pageSize);
&&&&&&&&&&&&&&&&&&&&$scope.myData&=&pagedD
&&&&&&&&&&&&&&&&&&&&$scope.totalServerItems&=&data.
&&&&&&&&&&&&&&&&&&&&if&(!$scope.$$phase)&{
&&&&&&&&&&&&&&&&&&&&&&&&$scope.$apply();
&&&&&&&&&&&&&&&&&&&&}
&&&&&&&&&&&&&&&&};
&&&&&&&&&&&&&&&&$scope.getPagedDataAsync&=&function&(pageSize,&page,&searchText)&{
&&&&&&&&&&&&&&&&&&&&setTimeout(function&()&{
&&&&&&&&&&&&&&&&&&&&&&&&var&
&&&&&&&&&&&&&&&&&&&&&&&&if&(searchText)&{
&&&&&&&&&&&&&&&&&&&&&&&&&&&&var&ft&=&searchText.toLowerCase();
&&&&&&&&&&&&&&&&&&&&&&&&&&&&UserService.getServerData(function&(largeLoad)&{
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&data&=&largeLoad.filter(function&(item)&{
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&return&JSON.stringify(item).toLowerCase().indexOf(ft)&!=&-1;
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&});
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&$scope.setPagingData(data,&page,&pageSize);
&&&&&&&&&&&&&&&&&&&&&&&&&&&&});
&&&&&&&&&&&&&&&&&&&&&&&&}&else&{
&&&&&&&&&&&&&&&&&&&&&&&&&&&&UserService.getServerData(function&(largeLoad)&{
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&$scope.setPagingData(largeLoad,&page,&pageSize);
&&&&&&&&&&&&&&&&&&&&&&&&&&&&});
&&&&&&&&&&&&&&&&&&&&&&&&}
&&&&&&&&&&&&&&&&&&&&},&100);
&&&&&&&&&&&&&&&&};
&&&&&&&&&&&&&&&&$scope.getPagedDataAsync($scope.pagingOptions.pageSize,&$scope.pagingOptions.currentPage);
&&&&&&&&&&&&&&&&$scope.$watch('pagingOptions',&function&(newVal,&oldVal)&{
&&&&&&&&&&&&&&&&&&&&if&(newVal&!==&oldVal&&&&newVal.currentPage&!==&oldVal.currentPage)&{
&&&&&&&&&&&&&&&&&&&&&&&&$scope.getPagedDataAsync($scope.pagingOptions.pageSize,&$scope.pagingOptions.currentPage,&$scope.filterOptions.filterText);
&&&&&&&&&&&&&&&&&&&&}
&&&&&&&&&&&&&&&&},&true);
&&&&&&&&&&&&&&&&$scope.$watch('filterOptions',&function&(newVal,&oldVal)&{
&&&&&&&&&&&&&&&&&&&&if&(newVal&!==&oldVal)&{
&&&&&&&&&&&&&&&&&&&&&&&&$scope.getPagedDataAsync($scope.pagingOptions.pageSize,&$scope.pagingOptions.currentPage,&$scope.filterOptions.filterText);
&&&&&&&&&&&&&&&&&&&&}
&&&&&&&&&&&&&&&&},&true);
&&&&&&&&&&&&&&&&
&&&&&&&&&&&&&&&&$scope.clickme&=&function&(v)&{
&&&&&&&&&&&&&&&&&&&&$location.path('/edit/'&+&v.name&+&"/"&+&v.allowance);
&&&&&&&&&&&&&&&&}
&&&&&&&&&&&&&&&&$scope.gridOptions&=&{
&&&&&&&&&&&&&&&&&&&&data:'myData',
&&&&&&&&&&&&&&&&&&&&enablePaging:true,
&&&&&&&&&&&&&&&&&&&&showFooter:true,
&&&&&&&&&&&&&&&&&&&&totalServerItems:'totalServerItems',
&&&&&&&&&&&&&&&&&&&&pagingOptions:$scope.pagingOptions,
&&&&&&&&&&&&&&&&&&&&filterOptions:$scope.filterOptions,
&&&&&&&&&&&&&&&&&&&&selectedItems:$scope.mySelections,
&&&&&&&&&&&&&&&&&&&&showSelectionCheckbox:true,
&&&&&&&&&&&&&&&&&&&&columnDefs:[
&&&&&&&&&&&&&&&&&&&&&&&&{&field:"name",&pinned:true&}
&&&&&&&&&&&&&&&&&&&&&&&&,
&&&&&&&&&&&&&&&&&&&&&&&&{&field:"allowance",&cellTemplate:'&div&class="ngCellText"&ng-class="col.colIndex()"&&span&ng-cell-text&{{COL_FIELD&|&currency}}&/span&&/div&'}
&&&&&&&&&&&&&&&&&&&&&&&&,
&&&&&&&&&&&&&&&&&&&&&&&&{&field:"entity",&pinned:true,&cellTemplate:'&div&class="ngCellText"&ng-class="col.colIndex()"&&span&ng-cell-text&{{$parent.row.entity&|&myfilter}}&/span&&/div&'&}
&&&&&&&&&&&&&&&&&&&&&&&&,
&&&&&&&&&&&&&&&&&&&&&&&&{&field:"name",&width:100,&cellTemplate:'&button&class="btn-xs&table-btn"&ng-click="clickme($parent.row.entity)"&&span&class="glyphicon&glyphicon-search"&aria-hidden="true"&&/span&&/button&'}
&&&&&&&&&&&&&&&&&&&&]/*,
&&&&&&&&&&&&&&&&&&&&multiSelect:false*/
&&&&&&&&&&&&&&&&};
&&&&&&&&&&&&}]);
&&&&});其中定义了该controller名为ListCtrl，$scope为局部变量，其中定义的数据与方法可在当前Ctrl作用域内生效，我们来看一下生效的list.html是怎么样的&div&class="gridStyle"&ng-grid="gridOptions"&&/div&就是这么一句话，定义了grid的div，其余的都交给了controller和ng-grid插件listController中引用了services/userService，service层用来与后台交互，管理数据：define(['services/services'],
&&&&function&(services)&{
&&&&&&&&services.factory('UserService',&['$http',
&&&&&&&&&&&&function&($http)&{
&&&&&&&&&&&&&&&&return&{
&&&&&&&&&&&&&&&&&&&&getData:function&()&{
&&&&&&&&&&&&&&&&&&&&&&&&return&[
&&&&&&&&&&&&&&&&&&&&&&&&&&&&{&name:"Moroni",&age:50,&birthday:"Oct&28,&1970",&salary:"60,000"&},
&&&&&&&&&&&&&&&&&&&&&&&&&&&&{&name:"Tiancum",&age:43,&birthday:"Feb&12,&1985",&salary:"70,000"&},
&&&&&&&&&&&&&&&&&&&&&&&&&&&&{&name:"Jacob",&age:27,&birthday:"Aug&23,&1983",&salary:"50,000"&},
&&&&&&&&&&&&&&&&&&&&&&&&&&&&{&name:"Nephi",&age:29,&birthday:"May&31,&2010",&salary:"40,000"&},
&&&&&&&&&&&&&&&&&&&&&&&&&&&&{&name:"Enos",&age:34,&birthday:"Aug&3,&2008",&salary:"30,000"&},
&&&&&&&&&&&&&&&&&&&&&&&&&&&&{&name:"Moroni",&age:50,&birthday:"Oct&28,&1970",&salary:"60,000"&},
&&&&&&&&&&&&&&&&&&&&&&&&&&&&{&name:"Tiancum",&age:43,&birthday:"Feb&12,&1985",&salary:"70,000"&},
&&&&&&&&&&&&&&&&&&&&&&&&&&&&{&name:"Jacob",&age:27,&birthday:"Aug&23,&1983",&salary:"40,000"&},
&&&&&&&&&&&&&&&&&&&&&&&&&&&&{&name:"Nephi",&age:29,&birthday:"May&31,&2010",&salary:"50,000"&},
&&&&&&&&&&&&&&&&&&&&&&&&&&&&{&name:"Enos",&age:34,&birthday:"Aug&3,&2008",&salary:"30,000"&},
&&&&&&&&&&&&&&&&&&&&&&&&&&&&{&name:"Moroni",&age:50,&birthday:"Oct&28,&1970",&salary:"60,000"&},
&&&&&&&&&&&&&&&&&&&&&&&&&&&&{&name:"Tiancum",&age:43,&birthday:"Feb&12,&1985",&salary:"70,000"&},
&&&&&&&&&&&&&&&&&&&&&&&&&&&&{&name:"Jacob",&age:27,&birthday:"Aug&23,&1983",&salary:"40,000"&},
&&&&&&&&&&&&&&&&&&&&&&&&&&&&{&name:"Nephi",&age:29,&birthday:"May&31,&2010",&salary:"50,000"&},
&&&&&&&&&&&&&&&&&&&&&&&&&&&&{&name:"Enos",&age:34,&birthday:"Aug&3,&2008",&salary:"30,000"&}
&&&&&&&&&&&&&&&&&&&&&&&&];
&&&&&&&&&&&&&&&&&&&&},
&&&&&&&&&&&&&&&&&&&&getOptions:function&()&{
&&&&&&&&&&&&&&&&&&&&&&&&return&{
&&&&&&&&&&&&&&&&&&&&&&&&&&&&data:'myData',
&&&&&&&&&&&&&&&&&&&&&&&&&&&&enablePinning:true,
&&&&&&&&&&&&&&&&&&&&&&&&&&&&columnDefs:[
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&{&field:"name",&width:120,&pinned:true&},
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&{&field:"age",&width:120&},
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&{&field:"birthday",&width:120&},
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&{&field:"salary",&width:120&}
&&&&&&&&&&&&&&&&&&&&&&&&&&&&]
&&&&&&&&&&&&&&&&&&&&&&&&}
&&&&&&&&&&&&&&&&&&&&},
&&&&&&&&&&&&&&&&&&&&getServerData:function&(success)&{
&&&&&&&&&&&&&&&&&&&&&&&&$http.get('jsonFiles/largeLoad.json').success(success);
&&&&&&&&&&&&&&&&&&&&},
&&&&&&&&&&&&&&&&&&&&saveData:function&(data,&success)&{
&&&&&&&&&&&&&&&&&&&&&&&&$http.post('/users/save',&data).success(success);
&&&&&&&&&&&&&&&&&&&&}
&&&&&&&&&&&&&&&&};
&&&&&&&&&&&&}]);
&&&&});其中引用的$http是用来管理ajax的对象，类似的对象还有$location，用来管理url地址，类似的对象还有很多，详细可以参见官方API文档。& & 至此，一个前端MVC框架基本构建完成，在之后的一篇中我们来着重介绍下还没讲过的filters和directives。本文出自 “” 博客，请务必保留此出处
了这篇文章
附件下载：　　
类别：┆阅读(0)┆评论(0)
请输入验证码：跟我读AngularJs的源代码，学习最优秀工程师的设计思路
跟我读AngularJs的源代码，学习最优秀工程师的设计思路
请继续你的念头
是不是应该先写个引导语？算了，浪费流量，略。你要相信，再牛逼的框架他的本质也是javascript代码，只要你会js代码你就能看懂！别怂！AngularJs是一个很简单的框架（其设计思想很前卫，涉及领域很广，使得它表现出很难的特性，但是你要相信，你使用起来还是很简单的。）我这里分析的是AngularJS v1.5.7，官网最新版的是2.x（新版的2.x比1.x改进了很多很多，改天再细致分析一遍）我们来分析一下angular的核心文件（），打开angular.js文件，可以看到整个的代码是放到一个自动执行函数里的，类似如下：（）（）；//一个简单的js闭包稍微复杂一点：（function(“参数”){}）（“参数”）；//所有的代码放在了这匿名function中可以看到大概代码量3万多行，是不是感觉有点崩溃，看起来还是有点费劲的。不用担心，你只要拉到js文件最底部，这里是初始化时调用的几个函数，从这里入口，你会很顺畅的理顺整个angular的整个架构思想。如图：在最底部，31310行代码处：判断angular是否启动（初始化）过了，如果初始化过就提示错误，没有则return；然后是绑定jQuery和提供公共接口API，可以看到注释很清晰。//try to bind to jquery now so that one can write jqLite(document).ready()具体的实现你可以点击方法看一下。就是如果你引入了jQuery库就调用你引用的，没有引用则使用angular内部的一个轻量级的jQuery（jqLite）。原文注释：// Use jQuery if it exists with proper functionality, otherwise default to us.接下来就是初始化model等等操作。你可以打开浏览器打个断点调试一下，享受阅读全球最优秀前端工程师的代码的乐趣。最后教你一个最简单的方式，因为js是解释型的弱类型语言，也可以说是很没有原则的语言，怎么玩都行，你可以把任意的js对象打印到浏览器页面，利用浏览器的开发者选项查看该js对象的属性，样貌。比单纯的看代码强多了。用浏览器把angular对象打印出来是这样的：var a =我这里用的是google的chrome浏览器，可以看到angular对象的每一个熟悉，然后你想了解哪个属性点击它展开就行了。是不是很方便快捷。好了，我这里不多啰嗦，抛砖引玉，想了解最前卫的设计思想，还是要自己动手哦。总之你记住一句话，根本没有什么难得，难者不会，会者不难，互联网开发者，全球都是平等的，只要你想，你就可以做到跟google的工程师一样优秀！BSN 超大号鼠标垫 高灵敏可水洗加厚锁边创意游戏鼠标垫电脑办公桌垫键盘垫 大白80*30￥14.9购买凯酷（KEYCOOL）荣耀2代RGB七彩背光游戏跑马灯机械键盘87/104黑轴青轴茶轴红轴 87键蓝字青轴战队无背光版￥199购买
本文仅代表作者观点，不代表百度立场。系作者授权百家号发表，未经许可不得转载。
请继续你的念头
百家号 最近更新：
简介: 专业互联网，移动互联网产品经理培训公司
作者最新文章如何看angularjs源代码？ - 知乎272被浏览11909分享邀请回答30420 条评论分享收藏感谢收起/angular/angular.js/tree/master/src/ng 下面的核心组件先一个个看完，然后挑一些
看看就行，毕竟都是差不多的。零散地把模块们看下去，接下来就是看要如何进行组装了。这里我同样推荐 Build Your Own AngularJS，这本书基本按照 AngularJS 的实现进行了解构，可以参考这本书中的顺序，自上而下地了解 AngularJS 的架构。8添加评论分享收藏感谢收起查看更多回答2 个回答被折叠（）哪位大神有angularjs权威教程的源代码，求分享【网页设计吧】_百度贴吧
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&签到排名：今日本吧第个签到，本吧因你更精彩，明天继续来努力！
本吧签到人数：0成为超级会员，使用一键签到本月漏签0次！成为超级会员，赠送8张补签卡连续签到：天&&累计签到：天超级会员单次开通12个月以上，赠送连续签到卡3张
关注：117,006贴子：
哪位大神有angularjs权威教程的源代码，求分享收藏
邮箱,谢谢！
登录百度帐号推荐应用