如何在MVC项目指定文件夹中不使用NuGet包实现AngularJS

1. 准备AngularJS核心文件 #

• 把你提前下载好的AngularJS核心脚本（比如angular.min.js）放到新建的angularJS文件夹内，如果需要用到路由、动画等扩展能力，对应的模块脚本也可以一起放到该文件夹下。

2. 引入AngularJS脚本到MVC页面 #

• 如果你使用全局布局页，打开Views/Shared/_Layout.cshtml，在body结束标签之前、其他自定义脚本之前引入AngularJS相关文件，使用MVC根路径写法避免路径错误：

<!-- 先引入AngularJS核心文件 -->
<script src="~/angularJS/angular.min.js"></script>
<!-- 按需引入扩展模块，比如路由模块 -->
<script src="~/angularJS/angular-route.min.js"></script>

如果是单页独立使用不需要布局页，直接在对应视图页面的合适位置引入上述脚本即可。

3. 配置AngularJS应用入口 #

3.1 定义应用模块 #

在angularJS文件夹内新建自定义脚本app.js，写入应用初始化代码：

// 第二个数组为应用依赖的模块列表，用到什么扩展模块就填什么
var myApp = angular.module('myApp', ['ngRoute']);

写完后在布局页的AngularJS核心文件引入之后，引入该自定义脚本：

<script src="~/angularJS/app.js"></script>

3.2 挂载应用到页面 #

在你需要使用AngularJS的视图页面（比如Views/Home/Index.cshtml）的根元素上添加ng-app指令，绑定你定义的应用模块：

<div ng-app="myApp">
  <!-- 所有AngularJS相关的功能内容都写在这个容器内 -->
</div>

4. 功能验证 #

可以写一个简单的控制器测试配置是否生效：

• 首先在app.js中添加控制器定义：

myApp.controller('TestController', ['$scope', function($scope) {
  $scope.welcomeText = 'AngularJS配置成功';
}]);

• 然后在视图页面调用控制器：

<div ng-app="myApp" ng-controller="TestController">
  <p>{{welcomeText}}</p>
</div>

运行项目后页面正常输出AngularJS配置成功就代表整个引入配置流程完成。

注意事项 #

• 脚本引入顺序不能颠倒：必须先引入AngularJS核心文件，再引入扩展模块，最后引入自定义的应用、控制器、服务等脚本
• 路径优先使用~/开头的根路径写法，避免嵌套视图下相对路径失效的问题

内容的提问来源于stack exchange，提问作者Matomkd