参考网站：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. MVC系列之一 入门概述

    一 概述 MVC作为一种当前比较好的开发web的框架,不得不提一下了,和WebForm比较来看,有了很大的进步和改进. 先进行一个简单的比较,两个都是Web开发框架,理念仍然是较快速开发. 不过MVC ...

  2. centos6.6下编译安装mysql5.6之后启动失败：Starting MySQL... ERROR! The server quit without updating PID file (/var/lib/mysql/localhost.localdomain.pid).

    今天在编译安装mysql5.6时候出现Starting MySQL... ERROR! The server quit without updating PID file (/var/lib/mysq ...

  3. 网络编程（一）——InetAddress

    网络编程(一)--InetAddress InetAddress类在java中代表的是IP地址,它有两个子类分别是Inet4Address和Inet6Address,其中Inet4Address代表的 ...

  4. 从exchange2010上面删除特定主题或特定时间的邮件

    昨天在上班的公交上接到同事电话,说他的的部门老大发错了一封邮件到另外一个同事邮箱了,问我能不 能去那个同事的邮箱里面删除,我一想,之前在网上看到过资料,到了公司趁那个误接收邮件的同事还没有来,在服务器 ...

  5. QCom MSM MDP显示驱动一些点的简记

    简要记录了Qualcom MSM8xxx MDP Framebuffer驱动中的一些点. Framebuffer设备的sysfs 330static int msm_fb_create_sysfs(s ...

  6. [HIHO119]网络流五·最大权闭合子图（最大流）

    题目链接:http://hihocoder.com/contest/hiho119/problem/1 题意:中文题意. 由于1≤N≤200,1≤M≤200.最极端情况就是中间所有边都是满的,一共有N ...

  7. CUBRID学习笔记 8 复制数据库

    1  export  database  类似sqlserver的分离数据库 cubrid unloaddb demodb分离后生成三个文件 demodb_objects, demodb_indexe ...

  8. HDU 5835 Danganronpa（弹丸论破）

     Danganronpa(弹丸论破) Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Other ...

  9. 问题: unrecognized selector sent to class 0x10affab20

    今天遇到了一个问题, 害我足足找了半个小时 问题: 明明可以跳进 方法 的实现里面, 但是程序运行的时候, 就是报错: 发送一个未识别消息, 而且程序直接跳出, 停止执行 原因: 项目的编译文件列表里 ...

  10. 高效使用Vector

    参考网页: http://www.cnblogs.com/biyeymyhjob/archive/2013/05/11/3072893.html#undefined 1.初始化的时候,最好先用rese ...