参考网站：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. Mysql基础语法

    mysql SELECT VERSION(), CURRENT_DATE, now();select user(); create database pets;show databases; use ...

  2. Duilib自定义控件响应指定命令(转载)

    转载:http://blog.csdn.net/panxianzhan/article/details/50772893 duilib在UIManager.h里的EVENTTYPE_UI枚举里定义了很 ...

  3. MTK+高通方案商

    1.德信无线通讯科技有限公司 点击打开链接 2.深圳优美科技

  4. 创立数据库表 examstudent

    package com.hanqi.test; import java.sql.*; import java.util.*; public class LianXi { public static v ...

  5. Java-基础编程（螺旋矩阵&乘法表）

    package cn.rick.study; import java.io.BufferedReader;import java.io.InputStreamReader;import java.ut ...

  6. C++，利用链式栈实现括号匹配，界面友好，操作方便，运行流畅

    #include<iostream> #include<string> using namespace std; struct Node { char ch; Node* ne ...

  7. linux 中的快捷键

    终端快捷键 tab=补全 ctrl+a=开始位置 ctrl+e=最后位置 ctrl+k=删除此处至末尾所有内容 ctrl+u=删除此处至开始所有内容 ctrl+d=删除当前字母 ctrl+w=删除此处 ...

  8. Servlet&jsp基础：第三部分

    声明:原创作品,转载时请注明文章来自SAP师太技术博客( 博/客/园www.cnblogs.com):www.cnblogs.com/jiangzhengjun,并以超链接形式标明文章原始出处,否则将 ...

  9. ubuntu 16.04 安装 QQ

    需要在Ubuntu 16.04下使用QQ,查找了一下,知乎的办法可行. 参考了:http://www.zhihu.com/question/20176925 与 http://www.zhihu.co ...

  10. MySQl的几个配置项

    对对于MySQL的日志功能,我们可以完全自己控制到底写还是不写.一般来说,binlog我们一般会开启,而对于慢查询我们一般会在开发的时候调试和观 察SQL语句的执行速度.但今天发现一个问题.在使用sh ...