手動搭建一個完整的angular實踐項目

      以下我記錄如何簡單的搭建一個angular項目， 比較適合有前端基礎，但又沒有使用過angular的前端開發人員，因為我看到網上的教程又都配套的使用了一些其他框架或者打包工具，以及進行一些復雜的開發環境配置，不利於初級的人學習和理解。后續我也會陸續寫幾篇結合不同工具框架，以及在混合app開發中搭建angular框架項目。

應用場景：

     基於angular的PC端web項目，采用require加載資源，使用angularAMD和angularCSS實現按需加載angular的controllers和css。

使用工具：

      一個編輯器 sublime, webstorm都行，不作要求，沒有工具、插件的限制，純手敲。

項目框架搭建　

　　1、項目目錄

　　目錄結構較簡單，index是項目啟動首頁，js存放項目的自定義js,libs存放第三方插件及工具，views存放頁面；

　　

　　2、 目錄說明

      本項目搭建好的詳細目錄結構如下：

　　

　　項目包含一個登錄頁面login,主界面home,三個home頁面下的子頁面disease、report、sports;

　　2.1 require資源加載

      本項目采用require加載靜態資源，main.js是require加載資源的配置文件，內容如下：

require.config({
    paths: {
        //angular
        "angular": '../libs/angular/angular.min.v1.2',      
        //實現angular單頁面路由
        "uiRouter": '../libs/angular/angular-ui-router.min',
       //動態加載js
        "angularAMD": '../libs/angular/angularAMD.min',
       //動態加載js
        "ngload": '../libs/angular/ngload.min',      
      //動態加載css
        "angularCSS": "../libs/angular/angular-css.min",
      //jquery引用
        "jquery": '../libs/jquery/jquery-1.12.4.min',
        //echart插件引用
        "echart":'../libs/plugin/echarts.min',
       //angular路徑文件引用
        "routeManager":'routeManager'
    },
    shim: {
      //定義require加載的優先順序
        "angular": { exports: "angular" },
        "uiRouter": ["angular"],
        "angularAMD": ["angular"],
        "ngload": ["angularAMD"],
        "angularCSS": ["angular"],
        'commonFunc':['jquery'],
        'routeManager':["angularAMD","uiRouter"]
    }
});

   //app.js是定義初始化angular項目的配置
define(["angular", "angularAMD", "uiRouter", "angularCSS","app","jquery"
 ], function (angular,angularAMD,uiRouter,angularCSS,myApp) {
    //資源加載后手動啟動項目angular的app
    return angularAMD.bootstrap(myApp);
});      

　　

　　2.2 app.js配置angular

//routeManager是路徑配置文件
define(['angular', 'routeManager'],
    function(angular,RouteManager) {
        var myApp = angular.module('starter', ['ui.router',"door3.css"]);
            myApp.config(
//配置按需加載contrlloer
                ['$controllerProvider', function($controllerProvider) {
                    myApp.controller = $controllerProvider.register;
                }])
//配置路有文件
            .config(RouteManager)
                }])
            .run(['$rootScope', '$state', '$window',function($rootScope, $state, $window) {
//$rootScope下可以定義全局方法和全局變量，以下定義了頁面跳轉的公共方法
                $rootScope.go=function(path,param){
                    $state.go(path,param);
                }

            }]);

        window.app = myApp;
        return myApp;
    });

　　　2.3 routeManager.js配置angular路由

define(["angularAMD"], function (angularAMD) {
    'use strict';
    var routeManager = function($stateProvider, $urlRouterProvider) {
             //定義默認路徑為登錄頁面
             $urlRouterProvider.otherwise('/login');

            $stateProvider.state('login', angularAMD.route({
                    url: '/login',
                    controllerUrl: "js/controllers/loginCtrl.js",   //登錄頁面的controller文件
                    templateUrl: 'views/login.html'  //登錄頁面的文件路徑
            }))
            .state('home', angularAMD.route({
                url: '/home',
                cache:'true',
                templateUrl: 'views/home.html',
                controllerUrl: 'js/controllers/homeCtrl.js'
            }))
            .state('home.disease', angularAMD.route({    
                url: '/disease',               //home文件下的子頁面
                templateUrl:'views/disease.html',   
                controllerUrl: 'js/controllers/diseaseCtrl.js',    //子頁面的controller
                css:"css/disease.css"          //子頁面的css文件

            }))
    }

    return routeManager;
});    

　　

　　3 github源碼分享(如果覺得有用，記得給個Star哦)

　　詳情請見源文件代碼，歡迎提問！

　　https://github.com/xingxiaoyiyio/angular-require-case