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....
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
};
Hy.
I will worked with angularjs but i have a little problem.
It was my first App!
When I change route scroll to top not working.
//index.html
<body ng-app="WebApp">
<div class="wrapper" >
<div ng-include='"templates/sidebar.html"'></div>
<div class="main-panel">
<div ng-include='"templates/header.html"'></div>
<div ng-view ></div>
</div>
</div>
</body>
And my js file:
//app.js
var app = angular.module('WebApp', [
'ngRoute','ui.bootstrap'
]);
app.config(['$routeProvider', function ($routeProvider) {
$routeProvider
// Home
.when("/", {templateUrl: "partials/home.html", controller: "PageCtrl"})
// Pages
.when("/page_two", {templateUrl: "partials/page2.html", controller: "PageCtrl"})
.when("/404", {templateUrl: "partials/404.html", controller: "PageCtrl"})
.otherwise({ redirectTo: '/404'});
}]).run(['$rootScope', '$location', function($rootScope, $location){
var path = function() { return $location.path();};
$rootScope.$watch(path, function(newVal, oldVal){
$rootScope.activetab = newVal;
});
}]);
app.controller('PageCtrl', function (/* $scope, $location, $http */) {
});
I have tried window.scrollto in run -- not working.
I have add autoscroll to ng-view and also not working. Here on stackoverflow works this for evryone but not for me? can anyone help?
update: Problem turns out to be accidental clear of all modules in the service.
This is the commit that works, repo. And this is the code that causes the problem, link. I still have no idea what's going wrong here.
After some trials, I think that it is because I use promise to fetch data. I also use d3Promise in the app, and get the same bug, the directive not loaded again (and this time, menu directive also fails).
A strange bug.
After I added menu directive, the map directive is not loaded into to the page. It was in the page before that.
no error, both in chrome console and grunt server.
I spent some time debugging. I found that the $routeProvider is not working. It only changes the url, but not loads the partials and binds controllers of partials.
Below is the code:
in index.html:
<body ng-app="SFM">
<!-- Add your site or application content here -->
<div class="container">
<div class="header">
<h3 class="text-muted">SF-Muni</h3>
<a ng-href="#/about" class="btn">about</a>
</div>
<div menu></div>
<div ng-view></div>
</div>
<!-- other vender files -->
<script src="scripts/app.js"></script>
<!-- utilities -->
<!-- services -->
<script src="scripts/services/d3service.js"></script>
<script src="scripts/services/muniService.js"></script>
<!-- controllers -->
<script src="scripts/controllers/main.js"></script>
<script src="scripts/controllers/about.js"></script>
<!-- directives -->
<script src="scripts/directives/menu.js"></script>
<script src="scripts/directives/map.js"></script>
</body>
app.js:
'use strict';
angular
.module('SFM', [
'ngResource',
'ngRoute',
'd3'
])
.config(function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'views/main.html',
controller: 'MainCtrl'
})
.when('/about', {
templateUrl: 'views/about.html',
controller: 'AboutCtrl'
})
.otherwise({
redirectTo: '/'
});
});
As far as I can tell you forgot to request the $routeProvider to be injected into the config function.
Try this:
.config(['$routeProvider',
function($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'views/main.html',
controller: 'MainCtrl'
})
.when('/about', {
templateUrl: 'views/about.html',
controller: 'AboutCtrl'
})
.otherwise({
redirectTo: '/'
});
}]);
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: '/'
});
});