发表于： 2017-05-30 00:19:46
2 948
今天完成的事情：
搜索页部分样式，熟悉项目结构目录
明天计划的事情：
完成搜索页样式
遇到的问题：
目前得到了本地的职位JSON数据和城市的字段数据，但是不知道如何读取出来。
收获：
构建angular项目的核心是引来注入，因为angular对于依赖的管理以及angular的使用场景完全可以做到这一点.首先在以来上,angular的依赖注入是个好东西,不了解的同学可以去搜一下资料.我这里简单的说,就是当我需要一个module的时候,我不用管它在哪,它是什么.我只要知道它的名字然后告诉angular就可以了,至于怎么将它的对象传递过来,怎么找到的,angular自己会去处理.
angular.module('myApp', [
'ngRoute',
]); 例如这里的ngRoute,我需要知道ngRoute怎么来的,在哪里.只要有一个模块定义为ngRoute我就可以直接拿来用.
鉴于Angular如此的给力,剩下的事情就好办了.我们只需要从功能和业务两方面将文件划分成module就可以了,然后将所有的库文件在页面上通过script标签引用,再将所有的业务文件也即是我们自己写的js合并为一个all.js加载到页面上即可.
这里文件的划分遵循angular官方的推荐方式:
|--js |--app.js // app启动文件,用于app配置 |--controllers.js // controllers也就是存放我们自己的业务文件 |--directives.js // 指令文件(指令可共用) |--fliters.js // 过滤器文件(过滤器可共用) |--services.js // 服务文件(可共用,一般是与服务器交互的服务)|--partials |--html1.html |--html2.html|--index.html app.js
'use strict';// Declare app level module which depends on filters, and services
angular.module('myApp', [
'ngRoute',
'myApp.filters',
'myApp.services',
'myApp.directives',
'myApp.controllers']).
config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/view1', {templateUrl: 'partials/partial1.html', controller: 'MyCtrl1'});
$routeProvider.when('/view2', {templateUrl: 'partials/partial2.html', controller: 'MyCtrl2'});
$routeProvider.otherwise({redirectTo: '/view1'});
}]);controllers.js
'use strict';/* Controllers */angular.module('myApp.controllers', [])
.controller('MyCtrl1', ['$scope', function($scope) {
}])
.controller('MyCtrl2', ['$scope', function($scope) {
}]); directives.js
'use strict';
/* Directives */
angular.module('myApp.directives', []).
directive('appVersion', ['version', function(version) {
return function(scope, elm, attrs) {
elm.text(version);
};
}]);filters.js
'use strict';/* Filters */angular.module('myApp.filters', []).
filter('interpolate', ['version', function(version) {
return function(text) {
return String(text).replace(/\%VERSION\%/mg, version);
};
}]); services.js
'use strict';/* Services */// Demonstrate how to register services// In this case it is a simple value service.angular.module('myApp.services', []).
value('version', '0.1'); index.html
<!DOCTYPE html><!--[if lt IE 7]> <html ng-app="myApp" class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]--><!--[if IE 7]> <html ng-app="myApp" class="no-js lt-ie9 lt-ie8"> <![endif]--><!--[if IE 8]> <html ng-app="myApp" class="no-js lt-ie9"> <![endif]--><!--[if gt IE 8]><!--> <html ng-app="myApp"> <!--<![endif]--><head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>My AngularJS App</title> <meta name="description" content=""> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="bower_components/html5-boilerplate/css/normalize.css"> <link rel="stylesheet" href="bower_components/html5-boilerplate/css/main.css"> <link rel="stylesheet" href="css/app.css"/> <script src="bower_components/html5-boilerplate/js/vendor/modernizr-2.6.2.min.js"></script></head><body> <ul> <li><a href="#/view1">view1</a></li> <li><a href="#/view2">view2</a></li> </ul> <!--[if lt IE 7]>
<p>You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
<![endif]--> <div ng-view></div> <div>Angular seed app: v<span app-version></span></div> <!-- In production use:
<script src="//ajax.googleapis.com/ajax/libs/angularjs/x.x.x/angular.min.js"></script>
--> <script src="bower_components/angular/angular.js"></script> <script src="bower_components/angular-route/angular-route.js"></script> <script src="js/app.js"></script> <script src="js/services.js"></script> <script src="js/controllers.js"></script> <script src="js/filters.js"></script> <script src="js/directives.js"></script></body></html>如此在不使用requirejs的情景下,项目就构建完成了.还有几个补充点就是其一你可以将controllers继续拆分为多个controller模块,这里可以完全按照你的业务进行划分.比如user目录下userController等等.然后将所有这些我们自己写的文件通过grunt或者gulp进行合并为一个单独的总的文件all.js这样在页面中除了库文件只要这一个文件就行了.angular的module所带来的好处就是这样合并的文件,不用在乎js合并的顺序,因为它是通过angular依赖注入的.
返回列表
评论