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>
Related
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 am getting to understand routing and I have a simple application with a couple buttons at the top in the header area. The buttons work well and display the correct information but I've directed that one of the pages (directory.html) use the "myController" controller that I created but instead it continues to give me the curley braces and not the actual scope data. Can someone tell me what I'm doing wrong?
HTML
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<title>Sample app</title>
<link href="content/css/styles.css" rel="stylesheet" type="text/css" />
<script src="app/lib/angular.min.js"></script>
<script src="app/lib/angular-route.min.js"></script>
<script src="app/app.js"></script>
</head>
<body>
<header ng-include="'header.html'"></header>
<main ng-view></main>
</body>
</html>
JS
angular.module('myApp', ['ngRoute'])
.config(['$routeProvider', function($routeProvider){
$routeProvider
.when('/home', {
templateUrl: 'views/home.html'
})
.when('/directory', {
templateUrl: 'views/directory.html',
//since this page requires a controller
controller: 'myController'
})
.otherwise({
redirectTo: '/home'
});
}]);
angular.module('myApp', [])
.controller('myController', function($scope) {
$scope.message = ("Hello World");
});
Directory.html
<p>This is my directory page.</p>
<p>{{message}}</p>
Header.html
<div id="menu-bar">
<h1>My Sample App</h1>
<ul>
<li>Home</li>
<li>Directory</li>
</ul>
</div>
Your js file is invalid.
angular.module('myApp', ['ngRoute'])
.config(['$routeProvider', function($routeProvider){
$routeProvider
.when('/home', {
templateUrl: 'views/home.html'
})
.when('/directory', {
templateUrl: 'views/directory.html',
//since this page requires a controller
controller: 'myController'
})
.otherwise({
redirectTo: '/home'
});
}]);
angular.module('myApp', [])
.controller('myController', function($scope) {
$scope.message = ("Hello World");
});
You have placed your controller inside the config module...
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: '/'
});
});
Having a $injector:modulerr error after including ngRoute. Using AngularJS 1.2.26
var app = angular.module('myApp', ['ngRoute']);
app.config(function ($routeProvider) {
$routeProvider.when('/', {controller: indexController1, templateURL: 'index1.html'});
$routeProvider.when('/view/:id', {controller: indexController2, templateURL: 'index2.html'});
$routeProvider.otherwise({redirectTo: '/'});
});
app.controller('indexController1', function ($scope) { .... }
app.controller('indexController2', function ($scope, $routeParams) { .... }
html template
<html ng-app="myApp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular-route.min.js"></script>
<script src="app.js">
</head>
<body>
<div ng-view></div>
</body>
</html>
There are some problems in your code:
The .config
You should use nested .when instead of again define $routeProvider
Name of the controllers between quotes
Missing closing ); in controllers
var app = angular.module('myApp', ['ngRoute']);
app.config(function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'index1.html',
controller: 'indexController1'
})
.when('/view/:id', {
templateUrl: 'index2.html',
controller: 'indexController2'
})
.otherwise({
redirectTo: '/'
});
});
app.controller('indexController1', function ($scope) {
});
app.controller('indexController2', function ($scope, $routeParams) {
});
The html
Missing </script> close tag.
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular-route.min.js"></script>
<script src="app.js"></script>
Check here a working example ngRoute
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....