I have a ui-router linking tabs working in plnkr, This is built off k.Scott Allen's deep linking tabs. I have it working perfectly in plnkr, but when I implement it into my app it won't work. My app is built off the anuglar-seed. It's like they arn't linked. neither my tabs or my views appear. My views are in the partials directory located in the root app directory myApp/app/partials
my appjs
'use strict'
// Declare app level module which depends on filters, and services
angular.module("myApp", ['ui.router',
'ngCookies',
'ngResource',
'ngSanitize',
'iu.bootstrap',
'ngGrid',
'myApp.filters',
'myApp.services',
'myApp.directives',
'myApp.controllers'
])
.config(function($stateProvider, $urlRouterProvider){
$urlRouterProvider.otherwise("main/firstTab");
$stateProvider
.state("main", { abtract: true, url:"partials/main", templateUrl:"main.html" })
.state("main.firstTab", { url: "partials/firstTab", templateUrl: "firstTab.html" })
.state("main.secondTab", { url: "partials/secondTab", templateUrl: "secondTab.html" })
.state("main.thirdTab", { url: "partials/thirdTab", templateUrl: "thirdTab.html" })
.state("main.fourthTab", {url: "partials/fourthTab", templateUrl: "fourthTab.html"});
});
my controllerjs
'use strict';
/* Controllers */
angular.module('myApp.controllers', [])
.controller("tabController", function($rootScope, $scope, $state) {
$scope.go = function(route){
$state.go(route);
};
$scope.active = function(route){
return $state.is(route);
};
$scope.tabs = [
{ heading: "firstTab", route:"main.firstTab", active:false },
{ heading: "secondTab", route:"main.secondTab", active:false },
{ heading: "thirdTab", route:"main.thirdTab", active:false },
{ Heading: "Reports"},
{ heading: "Reports", route:"main.fourthTab", active:false },
];
$scope.$on("$stateChangeSuccess", function() {
$scope.tabs.forEach(function(tab) {
tab.active = $scope.active(tab.route);
});
});
});
my mainhtml
<div ng-controller="tabController">
<section class=" span3 " style="float:left">
<tabset vertical="true" type="pills">
<tab
ng-repeat="t in tabs"
heading="{{t.heading}}"
select="go(t.route)"
active="t.active">
</tab>
</tabset>
</section>
<section class="span12 " >
<!--Content Blocks -->
<div class="tab-content" style="border-bottom-right-radius: 1em; min-height:400px; overflow: hidden;" >
<div ui-view></div>
</div>
</section>
</div>
in index
<html lang="en" ng-app="myApp" class="no-js">
<div ui-view></div>
angular.module("myApp", ['ui.router',
'ngCookies',
'ngResource',
'ngSanitize',
'ui.bootstrap',
'ngGrid',
'myApp.filters',
'myApp.services',
'myApp.directives',
'myApp.controllers'
]);
You need to change iu.bootstrap to ui.bootstrap.
The Solution was with the with the mapping of the main page and the partials. They weren't correct!
.config(function($stateProvider, $urlRouterProvider){
$urlRouterProvider.otherwise("partials/main/firstTab");
$stateProvider
.state("main", { abtract: true, url:"/partials/main", templateUrl:"partials/main.html" })
.state("main.firstTab", { url: "/partials/firstTab", templateUrl: "partials/firstTab.html" })
.state("main.secondTab", { url: "/partialssecondTab/", templateUrl: "partials/secondTab.html" })
.state("main.thirdTab", { url: "/partials/thirdTab", templateUrl: "partials/thirdTab.html" })
.state("main.fourthTab", {url: "/partials/fourthTab", templateUrl: "partials/fourthTab.html"});
});
Related
i kickstart an app with yeoman, who use "controllerAs" to initiate the app.js..
i know that in this way i don't use the $scope, but i have to use this to access to controller proprieties, but in somehow i'm not able to visualize the changes... somebody can help me?
Here what i have done:
app.js
angular
.module('viaggiApp', [
'ngAnimate',
'ngCookies',
'ngResource',
'ngRoute',
'ngTouch',
'ngMaps'
])
.config(function ($routeProvider, $locationProvider) {
$routeProvider
.when('/', {
templateUrl: 'views/main.html',
controller: 'MainCtrl',
controllerAs: 'main'
})
.when('/about', {
templateUrl: 'views/about.html',
controller: 'AboutCtrl',
controllerAs: 'about'
})
.otherwise({
redirectTo: '/'
});
$locationProvider.hashPrefix('');
});
controller (Main)
angular.module('viaggiApp').controller('MainCtrl', function ($q,GetPathGoogle,NgMap) {
this.propriety="say hi";
});
html
{{main.propriety}}
why the html don't render properly the propriety value, but it show me the brackets?
Try this
<html>
<head>
<script Src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.js"></script>
<script>
var app=angular.module("myapp", []);
app.controller("namesctrl", function(){
this.propriety="say hi";
});
</script>
</head>
<body ng-app="myapp" ng-controller="namesctrl as ctrl">
{{ctrl.propriety}}
</body>
</html>
This should work,
<div ng-controller="MainCtrl as main">
<h1> {{main.propriety}} </h1>
</div>
I'm trying to change the view using $location.
This is how i tried to do this.
View
<body ng-app="myApp" ng-controller="testCtrl">
<button ng-click="click();">Press</button>
</body>
Controller
var app = angular.module('myApp',[]);
app.controller('testCtrl',function($scope,$location){
$scope.click = function(){
$location.path('/main');
};
});
app.js
angular.module('myApp', [
'ngRoute',
'myApp.view2',
'myApp.version'
]).
config(['$locationProvider', '$routeProvider', function ($locationProvider, $routeProvider, testCtrl) {
$locationProvider.hashPrefix('!');
$routeProvider
.when('/main',
{
templateUrl: '/view2.html',
controller: testCtrl
})
.otherwise({redirectTo: '/view1'});
}]);
So when i click the button i can see the url changes from
http://localhost:8383/etest/index.html
to
http://localhost:8383/etest/index.html#/main
How can i fix this?
You missed out to include ng-view.
<body ng-app="myApp">
<div ng-view></div>
</body>
// view2.html
<div ng-controller="testCtrl">
<button ng-click="click();">Press</button>
</div>
app.config(['$locationProvider', '$routeProvider', function ($locationProvider, $routeProvider, testCtrl) {
$locationProvider.hashPrefix('!');
$routeProvider
.when('/main', {
templateUrl: 'templates/view2.html',
controller: testCtrl
})
.otherwise({redirectTo: '/view1'});
}]);
$scope.click = function(){
$location.path('/contact'); //you are in main path, So give different path then only you can see the location change easily.
$route.reload(); // reload the route
};
I'm getting very odd behavior from a very simple angular app using ui-router. All the templates are being loaded and displayed properly, but only 1 of the controllers is ever called, the DashboardCtrl. I can't explain this at all.
var adminPanel = angular.module('adminPanel', [
'ui.router',
'adminPanel.controllers'
])
.config(function ($stateProvider, $urlRouterProvider) {
$stateProvider
.state('dashboard', {
url: '/dashboard',
templateUrl: 'templates/dashboard.html',
controller: 'DashboardCtrl'
})
.state('home', {
url: '/home',
templateUrl: 'templates/home.html',
controller: 'HomeCtrl'
})
.state('login', {
url: '/login',
templateUrl: 'templates/login.html',
controller: 'LoginCtrl'
});
$urlRouterProvider.otherwise('/login');
});
adminPanel.controllers = angular.module('adminPanel.controllers', [])
.controller('LoginCtrl', function ($scope, $state, AuthService) {
console.log("hello!"); // never called
$scope.user = {
username: null,
password: null
};
$scope.submitLogin = function(loginForm) {
// never called
};
})
.controller('DashboardCtrl', ['$scope', function ($scope) {
console.log("Dashboard"); // this one is called for unkown reason
}])
.controller('HomeCtrl', [ '$scope', '$http', function ($scope, $http) {
console.log("HomeCtrl"); // never called
}]);
Markup is super simple:
<html>
<body ng-app="adminPanel">
<div ui-view></div>
<script src="js/vendor.js" type="text/javascript"/></script>
<script src="js/app.js" type="text/javascript"/></script>
</body>
</html>
The templates:
dashboard.html
<h1>Dashboard</h1>
home.html
<h1>Home</h1>
login.html
<h1>Login</h1>
<form name="loginForm" class="login-form" ng-submit="submitLogin(loginForm)">
<input type="text" name="username" ng-model="user.username"/>
<input type="password" name="password" ng-model="user.password"/>
</form>
I believe there was an issue with how I was attaching the controllers to the base angular module, but I still can't say for sure.
My controller gets called twice when I am using angular material tabs.
The tabs:
<div layout="column" flex="">
<md-content id="content">
<md-tabs md-dynamic-height="" md-selected="selectedIndex" md-border-bottom="" md-autoselect="">
<md-tab label="Home" ui-sref="home">
<div ui-view=""></div>
</md-tab>
<md-tab label="Contact" ui-sref="contact">
<div ui-view=""></div>
</md-tab>
</md-tabs>
</md-content>
</div>
The controllers:
(function () {
'use strict';
angular
.module('app.contact')
.controller('ContactController', ContactController);
function ContactController() {
var vm = this;
activate();
function activate() {
console.log('Contact Controller');
}
}
})();
(function () {
'use strict';
angular
.module('app.home')
.controller('HomeController', HomeController);
function HomeController() {
var vm = this;
activate();
function activate() {
console.log('Home Controller');
}
}
})();
The states:
(function () {
'use strict';
angular.module('app', [
])
.config(configBlock);
function configBlock($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise("/home");
$stateProvider
.state('home', {
url: "/home",
templateUrl: "home.html",
controller: 'HomeController',
controllerAs: 'vm'
})
.state('contact', {
url: "/contact",
templateUrl: "contact.html",
controller: 'ContactController',
controllerAs: 'vm'
});
}
})();
Plunker
This is, because you are using ui-view two times.
i also hav the same issue
use the ng-include instead of the ng-view
<md-tab label="Issues" >
<ng-include src="'/app/src/project/task/task.tpl.html'"></ng-include>
<!-- <div ui-view></div> -->
</md-tab>
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: '/'
});
});