码迷,mamicode.com
首页 > 其他好文 > 详细

Angular-seed项目自动搭建

时间:2017-07-03 23:55:30      阅读:1294      评论:0      收藏:0      [点我收藏+]

标签:version   安装包   cat   provider   r.js   加载   克隆   bsp   技术分享   


Angular1+前端项目搭建(angular-seed)
一、项目的启动
1、github克隆相关代码
2、本地需要安装git,不然bower install会报错
3、npm install
4、npm start启动,在浏览器中输入http://localhost:8000
二、项目框架

技术分享
app ------------------------------------------------------项目代码
component---------------------------------------------自定义指令、过滤器
view1-------------------------------------------------模板
view2-------------------------------------------------模板
app.css
app.js------------------------------------------------入口文件
index.html--------------------------------------------入口主页
index-async.html--------------------------------------入口主页(异步加载js)
e2e
node_modules----------------------------------------------npm安装包
bower.json------------------------------------------------bower配置项
package.json----------------------------------------------npm安装信息
三、项目内部代码结构
主module(myApp)包含多个子module(myApp.view1,myApp.view2,myApp.version)
myApp.version又包含其下子module();
1、app.js
angular.module(‘myApp‘, [
  ‘ngRoute‘,
  ‘myApp.view1‘,--------------------------------------view1模板
  ‘myApp.view2‘,--------------------------------------view2模板
  ‘myApp.version‘-------------------------------------自定义组件模板
]).
config([‘$locationProvider‘, ‘$routeProvider‘, function($locationProvider, $routeProvider) {
  $locationProvider.hashPrefix(‘!‘);

  $routeProvider.otherwise({redirectTo: ‘/view1‘});
}]);

2、view2(模板内部定义路由,使该模板指向该路由)
angular.module(‘myApp.view2‘, [‘ngRoute‘])

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

.controller(‘View2Ctrl‘, [‘$scope‘,‘view2Service‘,function($scope,view2Service) {
  $scope.test = view2Service.testName;
}])

.service(‘view2Service‘,[function(){
  this.testName = ‘ros333e‘;
  return this;
}]);

 

Angular-seed项目自动搭建

标签:version   安装包   cat   provider   r.js   加载   克隆   bsp   技术分享   

原文地址:http://www.cnblogs.com/Drose/p/7113163.html

(1)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!