Kév*_*uay 3 javascript angularjs
我环顾四周,找不到符合我目前情况的答案.我有一个app.js文件:
'use strict';
var demoApp = angular.module('demoApp', [
// Dépendances du "module" <-- demoApp
'ngRoute',
'routeAppControllers',
'todoList'
]);
demoApp.config(['$routeProvider', '$locationProvider',
function($routeProvider, $locationProvider) {
// Système de routage
$routeProvider
.when('/home', {
templateUrl: 'views/home.html',
controller: 'homeCtrl'
})
.when('/contact/:msg?', {
templateUrl: 'views/contact.html',
controller: 'contactCtrl'
})
.when('/todolist', {
templateUrl: 'views/todolist.html',
controller: 'listeCtrl'
})
.when('/testfiltre', {
templateUrl: 'views/testfiltre.html',
controller: 'demoFiltreCtrl'
})
.when('/testCreationfiltre', {
templateUrl: 'views/testcreationfiltre.html',
controller: 'demoCreationFiltreCtrl'
})
.otherwise({
redirectTo: '/home'
});
}
]);
var routeAppControllers = angular.module('routeAppControllers', []);
routeAppControllers.controller('homeCtrl', ['$scope',
function($scope){
$scope.message = "Bienvenue sur la page d'accueil";
}
]);
routeAppControllers.controller('contactCtrl', ['$scope','$routeParams',
function($scope, $routeParams){
$scope.message = "Laissez-nous un message sur la page de contact !";
$scope.msg = $routeParams.msg || "Bonne chance pour cette nouvelle appli !";
}
]);
routeAppControllers.controller('listeCtrl', [function(){}]);
我在todolist_controller.js中有todolist模块:
var todoList=angular.module('todoList',[]);
todoList.controller('todoCtrl', ['$scope',
function ($scope) {
var todos = $scope.todos = [];
$scope.addTodo = function () {
var newTodo = $scope.newTodo.trim();
if (!newTodo.length) {
return;
}
todos.push({
title: newTodo,
completed: false
});
$scope.newTodo = '';
};
$scope.removeTodo = function (todo) {
todos.splice(todos.indexOf(todo), 1);
};
$scope.markAll = function (completed) {
todos.forEach(function (todo) {
todo.completed = completed;
});
};
$scope.clearCompletedTodos = function () {
$scope.todos = todos = todos.filter(function (todo) {
return !todo.completed;
});
};
}
]);
我有我的index.html页面:
<!DOCTYPE html>
<html lang="fr" ng-app="demoApp">
<head>
<meta charset="utf-8" />
<title>Demo App</title>
<link rel="stylesheet" href="styles/style.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular-route.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-i18n/1.4.2/angular-locale_fr-ca.min.js"></script>
<script src="scripts/controllers/app.js"></script>
<script src="scripts/controllers/todolist_controllers.js"></script>
</head>
<body>
<div ng-view>
</div>
<nav>
<a href="#/home" class="btn btn-primary">Page d'accueil</a>
<a href="#/contact" class="btn btn-success">Page de contact</a>
<a href="#/todolist" class="btn btn-primary">Todo list</a>
<a href="#/testfiltre" class="btn btn-success">test filtre</a>
<a href="#/testCreationfiltre" class="btn btn-primary">test création filtre</a>
</nav>
</body>
</html>
我读过,我想要调用,例如,我的主模块App和我所有的其他模块文件应该以:angular.module('App').controller(...
但是,这意味着如果我将应用程序的名称从"app"更改为"my_app",我将不得不通过所有控制器并将"app"更改为"my-app".
我想避免这种情况,只能在index.html中导入我的文件,只需在我的'app'模块的依赖项中声明它.
当您构建一个角度应用程序时,您应该尽可能地分开以提供代码可读性.您应该为Web应用程序的每个页面/部分创建一个模块.
下面是这种结构的一个例子,我写了这个并将其用作角度应用程序的基础.
此文件夹包含所有组件和路由.
此文件具有项目的状态,并且是其自己的模块
此文件只是您可以将所有其他模块作为依赖项调用的基础.
var app = angular.module("myApp", [
'ui.bootstrap',
'ngAnimate',
'myAppRouter',
'myAppHomeCtrl',
'myAppHomeService',
'myAppNavbarDirective',
'myAppNavbarService',
'myAppLoginCtrl',
'myAppLoginService'
]);
您可以在此处查看所有编写和添加的不同模块.看看这个名为myApp的方式？我们在html中称之为那部分
<html ng-app="myApp">
这将包含"home"和"contact"之类的东西,这些文件夹应该包含一些自包含的html,控制器和服务所需的一切.
这是真正回答您的问题的一点,为您执行的控制器添加新模块,如下所示.
angular.module('myAppHomeCtrl', []).controller('homeCtrl', ['$scope', 'homeContent', function($scope, homeContent){
$scope.dataset = homeContent.getContent();
$scope.header = homeContent.getHeader();
$scope.subheading = homeContent.getSubheader();
}]);
所以你可以看到在我们称之为工厂的模块中,这也在这个文件夹中,看起来像这样.
angular.module('myAppHomeService', [])
.factory('homeContent', function(){
return {
getHeader: function(){
return "Welcome Human";
},
getSubheader: function(){
return "To Joe's Awesome Website";
},
};
});
所以回到我们的索引中,我们可以在这样的<script>标签中添加所有这些模块.
<!-- Angular Modules -->
<script type="text/javascript" src="app/app.module.js"></script>
<script type="text/javascript" src="app/app.routes.js"></script>
<script type="text/javascript" src="app/components/home/homeCtrl.js"></script>
<script type="text/javascript" src="app/components/home/homeService.js"></script>
<script type="text/javascript" src="app/shared/navigation-bar/navbarDirective.js"></script>
<script type="text/javascript" src="app/shared/navigation-bar/navbarService.js"></script>
<script type="text/javascript" src="app/components/login/loginCtrl.js"></script>
<script type="text/javascript" src="app/components/login/loginService.js"></script>
在制作中你将缩小所有这些,但你可以在开发时将它们称为alll.
最后,我将做一个总结,以确保您拥有使模块工作所需的一切
我希望这个角度结构的指导可以帮助你.祝好运
| 归档时间： |
|
| 查看次数： |
10455 次 |
| 最近记录： |