I want to create such a schema:
DOM schema
Navbar state must be always inserted, it have our template and controller.
Content state must insert templates and controllers depending on URL path. Example:
mysite.com/ inserts main.html and mainCtrl.js into Content state.
mysite.com/articles inserts articles.html and articlesCtrl.js into Content state.
My actual try:
//app.js
var app = angular.module('myApp', [
'ui.router',
'ngCookies',
'myApp.content',
'myApp.main',
'myApp.navbar',
'myApp.articles',
]);
app.config(['$stateProvider', '$urlRouterProvider', function ($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/');
$stateProvider
.state('index', {
url: '/',
views: {
'navbar': {
templateUrl: 'templates/navbar.html',
controller: 'navbarCtrl'
},
'content': {
templateUrl: 'templates/content.html',
controller: 'contentCtrl'
}
}
})
//contentCtrl.js
angular.module('myApp.content', ['ui.router'])
.config(['$stateProvider', function ($stateProvider) {
$stateProvider
.state('content.main', {
url: '/',
views: 'templates/content/main.html',
controller: 'mainCtrl'
})
.state('content.articles', {
url: '/articles',
views: 'templates/content/articles.html',
controller: 'articlesCtrl'
}
}])
.controller('contentCtrl', ['$scope', function ($scope) {
}
]);
//index.html
<body ng-app='myApp'>
<div ui-view="navbar"></div>
<div ui-view="content"></div>
</body>
//content.html
<h1>Content template</h1>
<ui-view></ui-view>
I see Navbar and Content states, but main and articles don't load into Content state.
How to create this kind of schema?
If the navigation must always be present in the page then you can do something like:
<body ng-app='myApp'>
<div ng-include="templates/navbar.html"></div>
<div ng-include="templates/content.html"></div>
</body>
Next, in your navbar.html template, include the controller directly from the view, so you won't need a special state for it:
<div ng-controller="navbarCtrl">
<!-- THE ACTUAL NAVIGATION HTML -->
</div>
Now you should be able to manage only the "real" states of the application and you don't need the content. prefix before the inner states, and in content.html you already have the <ui-view></ui-view> container for loading the actual states.
Related
Body of my index page looks in the following way:
<body >
<div ng-view></div>
</body>
I config my app in this way:
app.config(function($stateProvider, $urlRouterProvider, $locationProvider) {
$urlRouterProvider.otherwise("/");
$stateProvider.state('login', {
url: '/login',
templateUrl: 'login.html'
})
.state('main', {
url: '/',
templateUrl: 'main.html'
})
$locationProvider.html5Mode(true);
});
The content of my main.html file is:
<div>
Example content
</div>
I would like my page to dispaly the content of main file when entering the main address. However, it is blank. What am I missing (I am new to angular)?
I have a very simple configuration that is not working. The ui view is not rendering the template.
HTML:
<ul>
<li>Home</li>
<li>Register</li>
</ul>
<div ui-view></div>
<script src="/src/client/app/app.js"></script>
<script src="/src/client/app/config.js"></script>
AppJS
(function () {
'use strict';
angular.module('barmehealth', ['ui.router'])
.controller('RegisterCtrl', function($scope) {
});
}());
ConfigJS
(function () {
'use strict';
var core = angular.module('barmehealth');
core.config(function($urlRouterProvider, $stateProvider) {
$urlRouterProvider.otherwise('/');
$stateProvider
.state('register', {
url: '/register',
templateUrl: '/views/register.html',
controller: 'RegisterCtrl'
});
});
}());
When I go to the route by clicking on the link to register, the ui view renders the entire html page with the view tag and not the template which is given in the state.
https://www.dropbox.com/s/brm99i3thsw30h6/Screen%20Shot%202016-03-29%20at%209.15.14%20AM.png?dl=0
I had the path wrong in the templateUrl. It should have been
templateUrl: '/app/views/register.html'
Does anyone know if it is a default behavior for the view tag to load the surrounding html?
I am currently converting an AngularJS HTML app to ASP.NET MVC and I have laid out pretty much everything and but when the page loads I see the controller(dashboard.js) but its not firing any function from the dashboard controller here is what I'm doing:
in my _layout.cshtml I have the following:
<html ng-app="app_angular" >
<head>
<script src="~/script/angular/angular.js"></script>
<script src="~/script/angular/angular-route.js"></script>
<script src="~/script/angular/angular-resource.js"></script>
<script src="~/script/angular/angular-animate.js"></script>
<script src="~/script/angular/angular-cookies.js"></script>
<script src="~/script/js/jquery.min.js"></script>
<script src="~/script/js/bootstrap.min.js"></script>
<script src="~/Scripts/myapp.js"></script>
<script src="~/Scripts/controllers/dashboard.js"></script>
<script src="~/Scripts/routes.js"></script>
</head>
<body>
<ng-view class="fx fx-slide page"></ng-view>
<div class="container">
<h3 class="row title">
<div class="col-xs-6">Dashboard</div>
<div class="col-xs-6 text-right text-gray">{{ today | date:'MMMM d, y' }}</div>
</h3>
</div>
<section ng-repeat="template in templates">
<ng-include src="template"></ng-include>
</section>
<div class="container" ng-init="init()">
<!-- Buttons -->
</body>
</html>
myapp.js
var app_angular = angular.module('app_angular', ['ngCookies', 'ngRoute', 'ngResource', 'ngAnimate']);
dashboard.js
'use strict';
app_angular
.controller('dashboard', function ($rootScope, $scope) {
debugger
$scope.today = new Date();
/* set template subviews */
$scope.templates = {
stream: "../../views/templates/firstqtr.html",
modal: "../../views/templates/secondqtr.html",
loan: "../../views/templates/thirdqtr.html"
};
});
routes.js(first approach: does not work)
app_angular
.config(function($routeProvider, $httpProvider) {
$routeProvider
/* dashboard */
.when('/', {
controller: 'dashboard',
templateUrl: '../../views/home/index'
})
.when('/home/about', {
controller: 'dashboard',
templateUrl: '../../views/home/about'
})
.otherwise({
redirectTo: '/'
});
});
routes.js(second approach: does not work)
app_angular
.config(['$routeProvider', function ($routeProvider)
{
$routeProvider
.when('/', { templateUrl: '/home/index', controller: 'dashboard' })
.when('/', { templateUrl: '/home/about', controller: 'dashboard' })
.otherwise({ redirectTo: '/home' });
}])
What else I should be doing any help?
Assuming that /home is the path of your MVC page
you should change your angular routing to use path's that are
relative to your page.
add a view templates that are loaded into your
page
the angular routing below would:
load your mvc page /home/index and inject the template dashboard.html into ng-view element
(MVC controller Home with Action Index is required)
load your mvc page /home/index and inject the template about.html into ng-view element
Routes:
app_angular
.config(function ($routeProvider, $httpProvider) {
$routeProvider
/* dashboard */
.when('/', {
controller: 'dashboard',
templateUrl: '../../views/templates/dashboard.html'
})
.when('/about', {
controller: 'dashboard',
templateUrl: '../../views/templates/about.html'
})
.otherwise({
redirectTo: '/'
});
});
Remark:
You should rethink your approach of mixing MVC and anjularjs that not a good approach.
Try renaming your _layout.cshtml into index.html and start with a plain (ASP.NET MVC free) SPA.
Files:
index.html
views\dashboard.html
views\about.html
Routes:
app_angular
.config(function ($routeProvider, $httpProvider) {
$routeProvider
/* dashboard */
.when('/', {
controller: 'dashboard',
templateUrl: 'views/dashboard.html'
})
.when('/about', {
controller: 'dashboard',
templateUrl: '/views/about.html'
})
.otherwise({
redirectTo: '/'
});
});
I'm sure the answer is somewhere, but how do i link the same component (Navbar logo) to different pages depending on the URL. I would like to link /about when Url= /home and then /home when Url= /about.
app.js:
angular.module('myApp', ['ngAnimate', 'ngCookies', 'ngTouch', 'ngSanitize', 'ui.router'])
.config(function ($stateProvider, $urlRouterProvider) {
$stateProvider
.state('home', {
url: '/',
templateUrl: 'app/main/main.html',
controller: 'MainCtrl'
})
.state('about', {
url: '/about',
templateUrl: 'app/about/about.html',
controller: 'AboutCtrl'
})
.state('work', {
url: '/work',
templateUrl: 'app/work/work.html',
controller: 'WorkCtrl'
});
$urlRouterProvider.otherwise('/');
});
home.html
<div class="page">
<div ng-include="'components/navbar/navbar.html'"></div>
</div>
navbar.html
<nav class="navbar" ng-controller="NavbarCtrl">
<h1>title</h1>
</nav>
about.html
<div class="page">
<div ng-include="'components/navbar/navbar.html'"></div>
</div>
NavbarCtrl
* not sure what to do here, add a directive use ui.router use $location ??*
Hope someone can help, I've been thinking about it all week.
Not sure if I understood you correctly, but wouldn't ng-show fit your needs? ng-show
You could check in it what is the location at the moment and show proper url depending on it.
You answered your own question I think. I would use ngRoute and $location and I would probably create a directive for it.
I have a function to include html files on click. The problem is that it doesn't work when under ng-view (using $routeProvider), while it works fine outside of ng-view. I suspect that moving the include function from controller to service might help, but I am unsure how to do that as I'm new to Angular.
HTML when it works:
<body ng-app="MyApp">
<ng-include src="'views/main.html'" ng-controller="mainCtrl"></ng-include>
</body>
HTML when it doesn't work:
<body ng-app="MyApp">
<div ng-view></div>
</body>
main.html:
<div ng-controller="mainCtrl">
<button ng-click="include('temp1.html')">Block 1</button><i ng-click="delete('temp1.html')">DEL 1</i>
<button ng-click="include('temp2.html')">Block 2</button><i ng-click="delete('temp2.html')">DEL 2</i>
<button ng-click="include('temp3.html')">Block 3</button><i ng-click="delete('temp3.html')">DEL 3</i>
<div ng-repeat="template in templates">
<div ng-include="template.url">Content from blocks goes here</div>
</div>
</div>
APP.js:
angular
.module('MyApp', [
'ngResource',
'ngRoute',
'ui.bootstrap'
])
.config(function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'views/main.html',
controller: 'mainCtrl'
})
.when('/about', {
templateUrl: 'views/about.html',
controller: 'AboutCtrl'
})
.otherwise({
redirectTo: '/'
});
});
mainCtrl:
angular.module('MyApp').controller('mainCtrl', function ($scope) {
$scope.templates=[];
$scope.include = function(templateURI) {
var template={url:templateURI};
$scope.templates.push(template);
console.log($scope.templates);
}
$scope.delete= function(url){
removeEntity($scope.templates,url);
}
var removeEntity = function(elements,url){
elements.forEach(function(element,index){
if(element.url===url){
elements.splice(index,1);
}
})
}
The above "include" function does not work with $routeProvider. It works fine when used outside the ng-view, without $routeProvider. Would moving the 'include' function from mainCtrl to the serrvice would do the trick?
Any tips?
Thanks
your <ng-include src="'view/main.html'" > view/main.html...
and in ur route there is templateUrl: 'views/main.html'..
you should correct ur template url to view/main.html..
In main.html
<div ng-controller="MyController">
and in app.js
$routeProvider
.when('/', {
templateUrl: 'views/main.html',
controller: 'mainCtrl'
})
different controllers....