Hi, I am creating an app. In this app, some menu items will be listed, on click of these menu-items, sub-menu-items will be listed in a ng-view. On click of these sub-menu-items, I want to load a HTML in another ng-view. How can this be done?
Code is: index.html <!DOCTYPE html> <html ng-app="ox-admin" xmlns="http://www.w3.org/1999/xhtml";> <head> <script src="Scripts/jquery-1.9.1.js"></script> <script src="Scripts/angular.js"></script> <script src="Scripts/angular-resource.js"></script> <script src="Scripts/angular-route.js"></script> <script src="js/app.js"></script> <script src="js/controllers.js"></script> <link rel="stylesheet" type="text/css" href="Content/bootstrap.css" /> <title>OmniExchange - Administrator</title> </head> <body> <div class="container-fluid"> <div class="row"> <div class="col-md-2" ng-controller="ox-adminCtrl"> <!--Body content--> <ul class="phones"> <li ng-repeat="menuitem in menuitems"> <a href="#/htmls/{{menuitem.view}}">{{menuitem.name}}</a> </li> </ul> </div> <div class="col-md-10" ng-view> </div> </div> </div> </body> </html> app.js /* App Module */ var oxadminApp = angular.module('ox-admin', [ 'ngRoute', 'oxadminControllers' ]); oxadminApp.config(['$routeProvider', function ($routeProvider) { $routeProvider. when('/htmls', { templateUrl: 'htmls/blank.html' }). when('/htmls/:viewName', { templateUrl: function (params) { return '/htmls/' + params.viewName + '.html'; }, controller: 'pageCtrl' }). otherwise({ redirectTo: '/htmls' }); }]); controller.js var oxadminControllers = angular.module('oxadminControllers', []); oxadminControllers.controller('pageCtrl', ['$scope', '$routeParams', function pageCtrl($scope, $routeParams) { $scope.viewName = $routeParams.viewName; }]); oxadminControllers.controller('ox-adminCtrl', function ($scope) { $scope.menuitems = [ { 'name': 'Register Template', 'view': 'regTemplate' }, { 'name': 'Register Device', 'view': 'regDevice' }, { 'name': 'Register Services', 'view': 'regService' }, { 'name': 'Configure Authentication', 'view': 'confAuth' }, { 'name': 'Configure Integrations', 'view': 'confInt' } ]; }); oxadminControllers.controller('ctrl-regTemplate', function ($scope) { $scope.options = [ { 'name': 'General Info', 'view': 'rtGenInfo' }, { 'name': 'Define Data-fields', 'view': 'rtDataDef' }, { 'name': 'Define Doctypes', 'view': 'rtDocDef' }, { 'name': 'Add Tasks', 'view': 'rtAddTask' } ]; }); Detailed view for registering templates. <div ng-controller="ctrl-regTemplate"> <ul class="phones"> <li ng-repeat="option in options"> <a href="#/htmls/{{option.view}}">{{option.name}}</a> </li> </ul> </div> On click of these options, I want to load a HTML. Please help me. Thanks Nitin -- You received this message because you are subscribed to the Google Groups "AngularJS" group. To unsubscribe from this group and stop receiving emails from it, send an email to [email protected]. To post to this group, send email to [email protected]. Visit this group at http://groups.google.com/group/angular. For more options, visit https://groups.google.com/d/optout.
