Angular——MVC模式开发实战

时间:2024-11-15 13:34:55

创建项目

  • 创建工作目录
  • 使用bower下载需要插件
  • git init、add、commit之后得到分支master,再创建developer分支,然后再此分支上进行具体功能开发

Angular——MVC模式开发实战

Angular——MVC模式开发实战

MVC架构

  • 之前小项目中一般会存在一个module下面会有若干控制器,若干自定义指令,若干自定义服务。但是在大项目中,我们这样操作会给开发以及后期维护带来诸多不便,主要是耦合度太高,全部揉在一起了。
  • 降低耦合度,我们可以定义一个主模块module进行管理,再定义其他功能模块进行业务实现,例如控制器模块,自定义指令模块,自定义服务模块,定义好之后,通过依赖注入的方式将这些功能模块引入到主模块中,这样就达到了解耦的目的,方便的管理

Angular——MVC模式开发实战

Angular——MVC模式开发实战

  • 具体创建过程:
    • 在script目录下创建controllers.js、directives.js等文件,每个文件都是一个模块, controllers就是一个模块控制着控制器程序
// 实例一个模块,用来专门管理所有的控制器
angular.module('Controllers', []) .controller('DemoController', ['$scope', function ($scope) {
console.log('启动了');
}]) // 导航菜单
.controller('NavController', ['$scope', function ($scope) {
// 导航数据
$scope.navs = [
{link: '#/today', text: '今日一刻', icon: 'icon-home'},
{link: '#/older', text: '往期内容', icon: 'icon-file-empty'}
];
}])
    • 创建app.js文件作为angularJs的主入口,将上述的js文件以依赖的方式传入到app.js中的Yike模块下
var Yike = angular.module('Yike', ['ngRoute', 'Controllers', 'Directives']);