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

時間 2019-11-20

原文原文鏈接

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

應用場景：

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

使用工具：

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

項目框架搭建　

　　一、項目目錄

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

　　二、目錄說明

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

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

　　2.1 require資源加載

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

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;
});