AngularJS如何配置没有控制器的视图？答案

【问题标题】：AngularJS How to configure a view which is without Controller?AngularJS如何配置没有控制器的视图？
【发布时间】：2015-12-18 06:52:51
【问题描述】：

我正在开发一个 web 应用程序，并且 routeProvider 在它配置的视图之间导航：

config.$inject = ['$routeProvider', '$locationProvider'];
function config($routeProvider, $locationProvider) {
    $routeProvider
        .when('/', {
            controller: 'HomeController',
            templateUrl: 'home/home.html',
            controllerAs: 'vm'
        })
        .when('/login', {
            controller: 'LoginController',
            templateUrl: 'login/login.html',
            controllerAs: 'vm'
        })
        .when('/register', {
            controller: 'RegisterController',
            templateUrl: 'signUp/register.html',
            controllerAs: 'vm'
        })
        **.when('/sitelocator', {
            templateUrl: 'sitelocator/sitemap.html',
        })**
        .otherwise({redirectTo: '/login'});
}

“/sitelocator”我有一个包含地图的 HTML 文件（API 谷歌地图）我不需要控制器。问题是只有 templateUrl 页面没有正确加载，我该如何解决？谢谢。

编辑：

function initialize() {
    var map = new google.maps.Map(document.getElementById('map'), {
        zoom: 10,
        center: new google.maps.LatLng(22.344, 114.048),
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        disableDefaultUI: true,
        zoomControl: true
    });
    var polyOptions = {
        strokeWeight: 0,
        fillOpacity: 0.45,
        editable: true
    };
    // Creates a drawing manager attached to the map that allows the user to draw
    // markers, lines, and shapes.
    drawingManager = new google.maps.drawing.DrawingManager({
        drawingMode: google.maps.drawing.OverlayType.POLYGON,
        markerOptions: {
            draggable: true
        },
        polylineOptions: {
            editable: true
        },
        rectangleOptions: polyOptions,
        circleOptions: polyOptions,
        polygonOptions: polyOptions,
        map: map
    });
    google.maps.event.addListener(drawingManager, 'overlaycomplete', function(e) {
        if (e.type != google.maps.drawing.OverlayType.MARKER) {
            // Switch back to non-drawing mode after drawing a shape.
            drawingManager.setDrawingMode(null);
            // Add an event listener that selects the newly-drawn shape when the user
            // mouses down on it.
            var newShape = e.overlay;
            newShape.type = e.type;
            google.maps.event.addListener(newShape, 'click', function() {
                setSelection(newShape);
            });
            setSelection(newShape);
        }
    });
    // Clear the current selection when the drawing mode is changed, or when the
    // map is clicked.
    google.maps.event.addListener(drawingManager, 'drawingmode_changed', clearSelection);
    google.maps.event.addListener(map, 'click', clearSelection);
    google.maps.event.addDomListener(document.getElementById('delete-button'), 'click', deleteSelectedShape);
    buildColorPalette();
}
google.maps.event.addDomListener(window, 'load', initialize);

【问题讨论】：

你能说更多关于“不正确加载”的信息吗？有什么错误，你有什么问题？
初始化地图的方式可能存在问题。显示它是如何配置的。如果您使用onload 处理程序并且需要从指令初始化，它将无法工作
我想通过AngularJs的路由继续/sitelocator。有问题的页面 HTML 是包含谷歌地图 API 的 HTML，它没有控制器。我发布了地图的初始化

标签： javascript angularjs

【解决方案1】：

Angular Router 允许没有控制器的视图。

http://jsbin.com/wuxuwuxiga/1/edit?html,js,console,output

function config($routeProvider, $locationProvider) {
    $routeProvider
        .when('/', {
            template: 'hi'
        });
}

angular.module('app', ['ngRoute'])
  .config(config);

可能会出现许多问题，其中一个可能是您没有找到正确的路径。您的 href 值是否以 / 为前缀？您的所有状态都是从 Web 根目录定义的（在大多数情况下应该如此）。确保您的链接也指向网络根目录。

<!-- Wrong -->
<a href="sitelocator">Site Locator</a>
<!-- Right -->
<a href="/sitelocator">Site Locator</a>

希望对您有所帮助。

【讨论】：