参考网站：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. ContentProvider官方教程(5)ContentResolver插入、更新、删除 示例

    Inserting, Updating, and Deleting Data In the same way that you retrieve data from a provider, you a ...

  2. C语言的编译过程

  3. 复旦大学2014--2015学年第一学期高等代数I期末考试情况分析

    一.期末考试成绩班级前几名 金羽佳(92).包振航(91).陈品翰(91).孙浩然(90).李卓凡(85).张钧瑞(84).郭昱君(84).董麒麟(84).张诚纯(84).叶瑜(84) 二.总成绩计算 ...

  4. reason: -[UIKBBlurredKeyView candidateList]: unrecognized selector sent to instance

    reason: -[UIKBBlurredKeyView candidateList]: unrecognized selector sent to instance 发现上线的app一直会有这个cr ...

  5. Create Timer Example To Show Image Presentation in Oracle Forms

    Suppose you want to change multiple images after a specified time in home screen of your oracle form ...

  6. Python命令行解析argparse常用语法使用简介

    查看原文:http://www.sijitao.net/2000.html python中的命令行解析最简单最原始的方法是使用sys.argv来实现,更高级的可以使用argparse这个模块.argp ...

  7. 如何将自己开发的标签打成jar包

    1: 在Myeclipse中新建一个java工程 2: 将你的标签处理器类统统都拷到工程里面, 将tld文件拷到META-INF里面 3:点击file里面的export,

  8. shell script创建库

    先创建名称为 myfuns # my script functions function addem { + $ ] } function multem { * $ ] } function dive ...

  9. HDU-4521 小明系列问题——小明序列 间隔限制最长上升子序列

    题意:给定一个长度为N的序列,现在要求给出一个最长的序列满足序列中的元素严格上升并且相邻两个数字的下标间隔要严格大于d. 分析: 1.线段树 由于给定的元素的取值范围为0-10^5,因此维护一棵线段树 ...

  10. iOS - CoreMotion

    前言 NS_CLASS_AVAILABLE(NA,4_0) @interface CMMotionManager : NSObject @available(iOS 4.0, *) public cl ...