npm和webpack下的angular-demo

基础搭建npm和webpack步骤参照有道云质子计划4.24
这里简单描述

1. 首先在工作目录下创建一个web项目 新建 app目录 ，app下面有一个index.js 和index.html
   写index.html的时候务必在head里引入 <base href="/">

2. 接着cd进该项目

3. 命令行敲 npm init -y 目的生成package.json文件

4. 在web项目下创建一个webpack-config.js文件 （webpack工作时默认寻找的文件名）

5. 命令行执行 npm install webpack webpack-dev-server --save
   项目下会自动生成node_modules目录

6. 配置webpack.config.js

/**
 * Created by Administrator on 2017/4/26.
 */
var HtmlwebpackPlugin = require('html-webpack-plugin');
var path = require('path');
var webpack = require('webpack');
module.exports={
    context:__dirname+'/app',
    entry:{
        'app':'./index.js'
    },
    output:{
        path:__dirname+'/build',
        filename:'bundle.js'
    },
    module:{
        loaders:[
            //{test: /\.css$/, loader: 'css-loader'}
            {
                test:/\.less$/,
                loaders:['style-loader','css-loader','less-loader']

            },
            {
                test: /\.css$/,
                loaders: ['style-loader', 'css-loader']
            },
            {
                test: /\.html$/,
                loader: 'html-loader'
            },
            {
                test: /\.(png|jpg)$/,
                loader: 'url-loader?limit=40000'
            },
            {
                test:/\.json$/,
                loader:'json-loader'
            },
            { test: /\.(otf|eot|ttf|svg)\??.*$/, loader: 'file-loader'}
        ]
    },
    plugins: [
        new HtmlwebpackPlugin({
            template: path.resolve('\app', 'index.html'),
            filename: 'index.html',
            inject: 'body'
        })
    ]

}

 
执行webpack

执行npm start   如果这时候报 missing script:start 去package.json里面添加
"start": "webpack-dev-server" 接着执行 npm start

npm+webpack环境搭建完毕

---

接下来开始angular

1. 命令行里敲

   npm install angular --save

2. 项目里有导航功能，用到angular里的路由功能，继续敲

   npm install angular-route --save

首先理解：
index.js是项目的入口地址，所有angualr的控制器都写在这里。但是。相信你不会这样选择。
所以这里index.js仅仅只做对于其他资源的引入。
项目里基础的 html css javascript 这些文件格式建立对应的文件夹，不说目的了，你该懂。

我们最好还是杜绝重复的代码。例如angularJS模块的获取。
那么对angularJS路由等的获取，放在哪里呢？
– javascript下新建一个getAngular.js
里面只有两句话。

var app = angular.module('myApp', ['ngRoute']);
module.exports = app;

接着就可以在javascript下所有的controller文件中引入这个文件。

例如clock.js 对于引入的地址是否正确，可以鼠标放在上面，手按住ctrl建看提示。若点击直接跳入文件表明正确。

var app=require('../getAngular.js');
app.controller('myController',function($scope,$timeout){
    var updateClock=function(){
        $scope.clock=new Date();
        $timeout(function(){
            updateClock();
        },1000);
    };
    updateClock();
})

先前已经说过所有控制器在不做任何操作即所谓大杂烩的情况下都可以写进入口文件index.js，那么现在index没有任何东西，写的控制器再6，都应该执行不起来了吧？
此时需要require命令，将资源引入。

写navController.js的时候注意，选择蓝色方框内的写法，虽然红色内也可以，但是加载不出图片。

对，千万千万不要忘记在index.html里写div层放展示数据，看了半个多小时找bug，竟然是没写它。奔溃。

<div ng-view=""></div>

效果图