参考网站：https://docs.angularjs.org/tutorial/step_09
先看下目录结构
新建个空文件夹，
输入命令：
express --view ejs
cnpm install
布置node环境
进入public,在里面新建bowser.json文件，代码
{
"name": "angular",
"description": "A starter project for AngularJS",
"version": "0.0.0",
"homepage": "https://github.com/angular/angular-phonecat",
"license": "MIT",
"private": true,
"dependencies": {
"angular": "1.5.x",
"angular-mocks": "1.5.x",
"angular-route": "1.5.x",
"bootstrap": "3.3.x"
}
}
用git bash，并输入命令(在public文件夹下)
bower install
OK 下面开始写代码
app.config.js
angular.module('phonecatApp').config(['$locationProvider', '$routeProvider',
function ($locationProvider, $routeProvider) {
$locationProvider.hashPrefix('!');
$routeProvider.when('/phones', {
template: '<phone-Detail></phone-Detail>'
}).otherwise('/phones');
}]);
app.module.js
angular.module('phonecatApp', [
'ngRoute',
'phoneDetail'
]);
phone-detail.module.js
angular.module('phoneDetail', []).component("phoneDetail",{
templateUrl: "phone-detail/phone-detail.template.htm"
});
phone-detail.template.htm
<h1>这是一个模板</h1>
<div>内容</div>
<div>晨落梦公子</div>
index.html
<!DOCTYPE html>
<html lang="en" ng-app="phonecatApp">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="javascripts/app.module.js"></script>
<script src="javascripts/app.config.js"></script>
<script src="phone-detail/phone-detail.module.js"></script>
</head>
<body>
<div ng-view></div>
</body>
</html>
下面讲原理
phone-detail.module.js中:
modulel里面对应的是app.module.js里面的phoneDetail，so以后如果再写新的模型，记得在这里添加上，也称挂载
component里面写的是模型，如我写的是phoneDetail,也就对应app.config.js里面的<phont-Detail></phone-Detail>
templateUrl意为导入模板的路径，他可以把文件整个导进来,补充url相对根目录
app.config.js中
通过when和otherwise来调用不同的模板，从而显示不同界面
app.module.js中
module里面对应html文件的ng-app
当然还可以为其添加控制器controller，或指定同一模板不同内容 /phone/:id
注意module和config的位置
具体参考页眉的网站即可。这里不再赘述