参考网站：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的位置

具体参考页眉的网站即可。这里不再赘述

angular 模板 小例子的更多相关文章

  1. c/c++ 模板与STL小例子系列<三> traits

    c/c++ 模板与STL小例子系列 traits 对这个概念,还是处于懵逼的状态,初步体会就是,为了解决类型之间的转换问题. 从一个类型为A的指针,转化到类型为B的指针,中间需要用void*来作为中介 ...

  2. c/c++ 模板与STL小例子系列<二> 模板类与友元函数

    c/c++ 模板与STL小例子系列 模板类与友元函数 比如某个类是个模板类D,有个需求是需要重载D的operator<<函数,这时就需要用到友元. 实现这样的友元需要3个必要步骤 1,在模 ...

  3. c/c++ 模板与STL小例子系列<一 >自建Array数组

    c/c++ 模板与STL小例子系列 自建Array数组 自建的Array数组,提供如下对外接口 方法 功能描述 Array() 无参数构造方法,构造元素个数为模板参数个的数组 Array(int le ...

  4. Wijmo Angular 2 小应用

    Wijmo & Angular 2 小应用 中秋之际,Angular 团队发布 Angular 2 正式版,一款不错的图表控件Wijmo当天宣布支持 . Angular 2移除和替代了 Ang ...

  5. backbone入门小例子

    最近听了个backbone的分享,为了避免听不懂,就先做了个小例子 例子很简单,效果如下 基本视图模板: <script type="tex/template" id=&qu ...

  6. Vue2.x源码学习笔记-从一个小例子查看vm实例生命周期

    学习任何一门框架,都不可能一股脑儿的从入口代码从上到下,把代码看完, 这样其实是很枯燥的,我想也很少有人这么干,或者这么干着干着可能干不下去了. 因为肯定很无聊. 我们先从一个最最简单的小例子,来查看 ...

  7. 利用itext导出PDF的小例子

    我这边使用的jar包: itext-2.1.7.jar itextasian-1.5.2.jar 代码,简单的小例子,导出pdf: PdfService.java: package com.cy.se ...

  8. Oracle存储过程入参传入List集合的小例子

    第一步:创建一个对象类型 create or replace type STUDENT as object( id ), name ), age ) ); / 第二步:创建一个数组类型 (任意选择下面 ...

  9. 基于vue-cli、elementUI的Vue超简单入门小例子

    - 这个例子还是比较简单的,独立完成后,能大概知道vue是干嘛的,可以写个todoList的小例子. - 开始写例子之前,先对环境的部署做点简单的介绍,其实和Vue官方的差不多. #如若没有安装过vu ...

随机推荐

  1. ubuntu 安装 Tomcat

    首先确认系统中没有安装openJDK,有的话先卸载,安装oracle jdk 下载jdk Linux x64   172.95 MB       jdk-8u101-linux-x64.tar.gz ...

  2. 学习笔记TimePicker

    new TimePickerDialog(this, new OnTimeSetListener() { @Override public void onTimeSet(TimePicker view ...

  3. sql语句中的注释符号

    sql语句中的注释符号     mysql # 到该行结束.-- 到该行结束 以及 的注释方格:mysql> SELECT 1+1;     # 这个注释直到该行结束mysql> SELE ...

  4. mysql for windows之my.ini优化

    修改配置文件 C:\ProgramData\MySQL\MySQL Server 5.6\my.ini  并重新启动. 1, 查看MySQL服务器配置信息 mysql> show variabl ...

  5. 目前比较全的CSS重设(reset)方法总结

    在当今网页设计/开发实践中,使用CSS来为语义化的(X)HTML标记添加样式风格是 重要的关键.在设计师们的梦想中都存在着这样的一个完美世界:所有的浏览器都能够理解和适用多有CSS规则,并且呈现相同的 ...

  6. 对Spring <context:annotation-config/>的理解

    在基于主机方式配置Spring的配置文件中,你可能会见到<context:annotation-config/>这样一条配置,他的作用是向 Spring 容器注册 AutowiredAnn ...

  7. autofs实现nfs自动挂载

    apt-get install autofs 主配置文件/etc/auto.master 副配置文件可以在之配置文件中自定义 能生效的配置文件如下例: 将/usr/local/nginx/html挂载 ...

  8. .NET在后置代码中输入JS提示语句（背景不会变白）

    来源:http://niunan.iteye.com/blog/248256 Page.ClientScript.RegisterStartupScript(Page.GetType(), " ...

  9. winscp 软件。

    winscp 软件.是管理服务器的软件. 我们可以输入ip和password,对服务器上的代码进行管理.

  10. iOS - OC 内存管理

    1.OC 基本内存管理模型 1.1 自动垃圾收集 在 OC 2.0 中,有一种称为垃圾收集的内存管理形式.通过垃圾收集,系统能够自动监测对象是否拥有其他的对象,当程序执行需要空间的时候,不再被引用的对 ...