AngularJS中ng-view路由不生效，其余功能正常的技术求助

核心问题分析 #

• 脚本引入顺序错误：
  angular-route依赖AngularJS核心库，必须在angular.min.js（或angular.js）之后引入；同时不能同时引入angular.min.js和angular.js，二者是同一库的压缩与非压缩版本，重复引入会导致框架冲突。
• 路由模块名称拼写错误：
  AngularJS官方路由模块的名称是ngRoute，而非代码中的ntRoute，依赖名称错误会导致路由功能无法加载。
• 重复定义Angular模块：
  代码中先通过var ThePrinter = angular.module('Mine', ['ngRoute'])创建了带路由依赖的模块，随后又通过var Mine = angular.module("Mine", [])重新定义了空依赖的同名模块，覆盖了之前的模块配置，导致路由配置失效。

修复步骤 #

1. 修正脚本引入顺序与重复引入问题 #

将页面中的脚本引入修改为：

<script src="~/angular-1.8.2/angular.min.js"></script>
<script src="~/angular-1.8.2/angular-route.js"></script>

只保留一个AngularJS核心文件（选min版或非min版即可），并确保angular-route在核心文件之后引入。

2. 修正路由模块依赖名称 #

将路由模块的依赖从ntRoute改为ngRoute：

var ThePrinter = angular.module('Mine', ['ngRoute']);
ThePrinter.config(function($routeProvider)
{
    $routeProvider.when('/', {
        template:'<h1>Maganes Pro</h1>'
    });
});

3. 移除重复的模块定义 #

删除代码中重新定义Mine模块的行，改为直接在已创建的Mine模块上添加工厂和控制器：

// 删掉重复定义的行：var Mine = angular.module("Mine", []);
// 直接获取已定义的Mine模块
var Mine = angular.module("Mine");
Mine.factory('MyFactory', function () {
    return {
        user:'Magnos',
        pass:'018',
        MyFun: function () { console.log('fine'); }
    };
});
Mine.controller("MyCont", function ($scope, $http, MyFactory){
    // 控制器原有逻辑保持不变
});

4. 补充默认路由规则（可选） #

添加路由的默认匹配规则，确保路由 fallback 正常：

ThePrinter.config(function($routeProvider)
{
    $routeProvider.when('/', {
        template:'<h1>Maganes Pro</h1>'
    })
    .otherwise({ redirectTo: '/' }); // 添加默认路由
});

修复后完整脚本示例 #

<script src="~/angular-1.8.2/angular.min.js"></script>
<script src="~/angular-1.8.2/angular-route.js"></script>
<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="~/js/site.js" asp-append-version="true"></script>

@await RenderSectionAsync("Scripts", required: false)

<script>
    var Mine = angular.module('Mine', ['ngRoute']);
    Mine.config(function($routeProvider)
    {
        $routeProvider.when('/', {
            template:'<h1>Maganes Pro</h1>'
        })
        .otherwise({ redirectTo: '/' });
    });
    
    Mine.factory('MyFactory', function () {
        return {
            user:'Magnos',
            pass:'018',
            MyFun: function () { console.log('fine'); }
        };
    });
    
    Mine.controller("MyCont", function ($scope, $http, MyFactory){
        $http.get('Index').then(function(res){
            console.log(res);
        }, function(err){
            console.log(err);
        });

        $http.post('Index', { Magnos: 'Maganes', Pass: 100 }).then(function (arr) {
            console.log(arr);
        }, function (err) {
            console.log(err);
        });
        $scope.Myhtml = '<p>Mine</p>'
        $scope.myfac = MyFactory.user;
        $scope.myfacpass = MyFactory.pass;
        $scope.MyFunction = MyFactory.MyFun();

        var MyDate = new Date();
        $scope.hideorshow = function () {
            $scope.thehide = !$scope.thehide;
        };
        $scope.thehide = true;
        $scope.torf = true;
        $scope.FirstName = 'Micheal';
        $scope.LastName = 'Jackson';
        $scope.Magnos = 'MGS Magnos';
        $scope.MySelect = 'Select';
        $scope.MYCB = 'MYCB';
        $scope.AMagnos = {Name:'Maganes', Bozo:150};
        $scope.data = ['One', 'Two', 'Three'];
        $scope.data2 = [
            {UN:'Magnos', Pass:018},
            {UN:'Casper', Pass:012}
        ];
        $scope.MyClick = function ()
        {
            alert('Fine');
        };
        $scope.BigArray = [
            { Emp: 'Magnos', Phone: 012, Date: MyDate },
            { Emp: 'Casper', Phone: 011, Date: MyDate },
            { Emp: 'Hunter', Phone: 010, Date: MyDate },
            { Emp: 'Maganes', Phone: 018, Date: MyDate }
        ];
        console.log($scope.Username);
        console.log($scope.Password);
    });
   
</script>

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