I am very new to AngularJS. This is my first project so please forgive me if my question is very basic.
I am created a page using simple HTML and put three button on it.
On these button click I want to load views in the lowel part of screen.
Index.html
<body ng-app="MyApp">
<div class="tab" ng-controller="TabControlController">
<button class="tablinks" onclick="openTab(event, 'Environments')" ng-click="Views/EnvironmentsView.html">Environments</button>
<button class="tablinks" onclick="openTab(event, 'SIT_Downloader')" ng-click="Views/SITDownloaderView.html">Download PCP Client</button>
<button class="tablinks" onclick="openTab(event, 'Users')">PCP Users</button>
</div>
<div id="Environments" class="tabcontent" ng-controller="environmentController">
<div>
<div ng-view></div>
</div>
</div>
<div id="SIT_Downloader" class="tabcontent" ng-controller="SITDownloaderController">
<div>
<div ng-view></div>
</div>
</div>
<div id="Users" class="tabcontent">
<div>
<div ng-view></div>
</div>
</div>
</body>
Bootstrap.js
var MyApp= angular.module('MyApp', ['ngRoute'])
.config(function($routeProvider) {
$routeProvider
.when('/',
{
templateUrl: 'Views/EnvironmentsView.html',
controller: window.environmentController
})
.otherwise({ redirectTo: '/' });
});
views are very simple as of now...
<h3>PCP Users</h3>
<p>This screen will be used to add/remove users</p>
Can anyone help me to understand what I am missing here or redirect me to some page with full example of this.
This is single page application.
You can try instead of calling a function onclick of a button ,just link the route with anchor tag
Maintain the routes in separate js file
like:
(function() {
'use strict';
angular.module('app.home').config(appRoutes);
appRoutes.$inject = ['$routeProvider', '$locationProvider'];
function appRoutes($routeProvider, $locationProvider) {
$routeProvider
.when('/', {
templateUrl: '../yourhtmlfile.html',
controller: 'controllerName',
resolve: {}
})
}
})();
Also you dont need to have multiple ng-view for each view
have a single ng-view
<div>
<div ng-view></div>
</div>
this helps in loading the html page when you click on the tag and loads the corresponding html file.
You have some problem in your sample.
1- change <button ng-click=".." ></button> to
you can use button also but you should crate a function that changes the current route to new route.
<button ng-click="changeRoute('/home')" >Home</button>
$scope.changeRoute = function(newRoute){
$location.path(newRoute);
}
2- wrong syntax for define controller in route.(put controller in each route)
3- Don't need to multiple ng-view
Demo
Related
Here is my controller:
(function () {
'use strict'
angular
.module('inspinia')
.controller('myController', myController);
myController.$inject = ['$scope', '$uibModal'];
function myController($scope, $uibModal) {
function openModal() {
var modalInstance = $uibModal.open({
templateUrl: 'my_path/modal.html',
scope: $scope
});
};
}
})();
I have a button that opens the modal when calling openModal.
Here is my modal template:
<div class="inmodal" ng-controller="modalController">
<div class="row">
<form name="myForm" ng-submit="processForm()" ng-validate="" class="p-lg">
<div id="form-views" ui-view></div>
</form>
</div>
</div>
Here is the problem: when I open the modal with the form tag inside it I don't get the template that I'm expecting, I'm getting the page from where I am inside the modal. But when I comment the entire form, everything goes OK, but I need this form :)
What could be going on? There are no errors been shown in the console.
<div class="inmodal" ng-controller="modalController">
<div class="row">
<!--<form name="myForm" ng-submit="processForm()" ng-validate="" class="p-lg">
<div id="form-views" ui-view></div>
</form>-->
</div>
</div>
That works.
I'm new with angular. If any info is missing, please tell me :)
That's the modal I'm using.
EDIT
Actually, the problem is with <div id="form-views" ui-view></div>, this div is used with this wizard.
I use ui-router to route to particular sub page as needed:
var myApp = angular.module("myApp",['ui.router']);
myApp.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('usergroups', {
url: "/usergroups",
templateUrl: "pages/usergroups.html",
controller : 'UsergroupsCtrl'
})
.state('usergroups.create', {
url: "/create",
templateUrl: "pages/usergroups.new.html",
controller : 'UsergroupsCtrl'
})
...
This is my usergroups.html:
<body>
<h3>User Groups</h3><br/>
<button class="fon-btn" type="button" ng-hide = "toAdd" ng-click="toAdd = true" ui-sref="usergroups.create">Create New Group</button>
<div ui-view></div>
<ul>
<li class="bitcard padding10" ng-repeat="group in usergroups">
<span class="padding10"><strong>{{group.name}}</strong></span>
</li>
</ul>
</body>
and usergroups.new.html:
<body>
<form ng-submit="add()">
<input class="btn" type="submit" value="Add Usergroup"><br/><br/>
</form>
</body>
When I click on Add Usergroup, it will called add() from UsergroupsCtrl:
$scope.add = function() {
$scope.usergroups.push({name:$scope.name});
console.log($scope.usergroups);
}
The console show that $scope.usergroups is already updated. but somehow in usergroups.html: ng-repeat="group in usergroups" did not update the view. I add $scope.$apply() and $scope.$digest() but got an error:
$apply already in progress
But everything works fine if I did not use ui-router. How can I resolve this?
I think same $scope cannot be used in two different controllers. you can change it to $rootScope. like $rootScope.usergroups.push(). This SO may help you. You can use $stateParam also.
The controller I'm using is:
angular.module('app.PostView', [])
.controller('PostViewCtrl', function($scope, $http, Constants) {
$scope.posts = [];
$scope.doSomething = function(){
console.log("in doSomething");
}
$http.get(Constants.POST_URL)
.then(function (response){
console.log(response);
var post = new PostFactory(response.data);
$scope.posts.push(post);
});
})
The view for the controller is
<div ng-repeat="post in posts" >
<div class="home-container">
<div id="details-container">
<!-- using single item Array instead of single iftem to fix linkify bug -->
<div ng-bind="post.desc"></div>
<span class="item-note single-post-details">
<!-- <div class="time-text">{{post.id}}</div> -->
<div class="title" >{{post.title}}</div>
</span>
<a ng-click="doSomething()" href="#" >{{post.name}}</a>
</div>
</div>
</div>
If I replace ng-click with onclick then doSomething is triggered. Currently it is not. The same Controller and html code in other controller/views does work.
When you clicking on the anchor, it change the routing as http://url/#, that listen by the $routeProvider & ng-view loads the default view and template as you are seeing on your side.
Basically you need to remove href="#" from your anchor link or just put href="" blank in that anchor. That would fix your problem.
<a ng-click="doSomething()" href="" >{{post.name}}</a>
Remove href completely
<a ng-click="doSomething()"
style='cursor:pointer' >{{post.name}}</a>
I asked a question yesterday How to do multiple views with Angular to support header and sidebar? and based on that question I was able to make some progress in having a header and a sidebar for my AngularJS App.
I've got a working fiddle here: http://jsfiddle.net/mcVfK/929/
The JS looks like this:
angular.module('app', ['ngRoute'])
.config(['$routeProvider', function ($routeProvider) {
$routeProvider.
when('/header1', {
templateUrl: 'header1.html',
controller: DashboardCtrl
})
.when('/header2', {
templateUrl: 'header2.html',
controller: DashboardCtrl
})
.when('/dashboard',{
templateUrl: 'dashboard.html',
controller: DashboardCtrl
})
.when('/sidebar1',{
templateUrl: 'sidebarlink1.html',
controller: DashboardCtrl
})
.when('/sidebar2',{
templateUrl: 'sidebarlink2.html',
controller: DashboardCtrl
})
.otherwise({
redirectTo: '/header1'
});
}]);
function DashboardCtrl() {
}
This seems to work, however, I want to find out whether there is a way to avoid including sidebar.html on every link in the sidebar?
If you notice on the fiddle, I'm doing this:
<script type="text/ng-template" id="sidebarlink1.html">
<div ng-include="'sidebar.html'" id="sidebar"></div>
sidebar link 1 content - including sidebar
</script>
<script type="text/ng-template" id="sidebarlink2.html">
<div ng-include="'sidebar.html'" id="sidebar"></div>
sidebar link 2 content - including sidebar
</script>
So I'm including sidebar.html on every link in the sidebar. I'm wondering if there is a way to avoid this? Also, is there an Angular way to highlight which sidebar link is currently active?
You can move the sidebar include out and use a variable to determine in what route you want to see it. Check out this jsfiddle:
http://jsfiddle.net/mcVfK/931/
angular.module('app', ['ngRoute'])
.config(['$routeProvider', function ($routeProvider) {
$routeProvider.
when('/header1', {
templateUrl: 'header1.html',
controller: DashboardCtrl,
resolve: {
hasSidebar: function($rootScope) {
$rootScope.hasSidebar = false;
return false; }
}
})
I recomend to use ui-router (What is the difference between angular-route and angular-ui-router?) instead of ngRoute. Lear about it if you are interested. And then use some ng-switch like this:
//Parent template
<script type="text/ng-template" id="sidebarlinkparent.html">
<div ng-include="'sidebar.html'" id="sidebar"></div>
<div ng-switch="$state.current.name">
<div ng-switch-when="sidebar1" ng-include="'sidebarlink1.html'"></div>
<div ng-switch-when="sidebar2" ng-include="'sidebarlink2.html'"></div>
</div>
</script>
//template sidebar 1
<script type="text/ng-template" id="sidebarlink1.html">
sidebar link 1 content - including sidebar
</script>
//template sidebar 2
<script type="text/ng-template" id="sidebarlink2.html">
sidebar link 2 content - including sidebar
</script>
Then change your templateUrl in route config to go at the parent template sidebarlinkparent.html on /sidebar1 and /sidebar2
Aswell you can use your actual ngRoute and change the ngSwitch condition with a controller scope var setted on routes or something like that
EDIT:
OPTION 2:
//Parent template
<script type="text/ng-template" id="sidebarlinkparent.html">
<div ng-include="'sidebar.html'" id="sidebar"></div>
<div ng-include="$state.current.name +'.html'"></div>
</script>
OPTION 3:
//Parent template
<script type="text/ng-template" id="sidebarlinkparent.html">
<div ng-include="'sidebar.html'" id="sidebar"></div>
<div ng-include="$state.params.include +'.html'"></div>
</script>
etc etc..
I can't for the life of me get AngularJS to work properly. I am not messing with templates or anything of that nature yet, I'm just trying to get the call to the controller to work correctly.
Here is a portion of my homepage.html
<div class="row" ng-app="eventsApp">
<div class="column small-12 content">
<p>Temporary Test.</p>
<div ng-view></div>
<ul class="small-block-grid-2 medium-block-grid-4 large-block-grid-5 shots">
<li>
<div class="thumb">
<a href="#Testing">
<div class="ctr-show s1">
<div class="show"><i class="fa fa-search-plus fa-lg"></i></div>
</div>
<img src="/img/screenshots/thumbs/g" alt="">
</a>
</div>
</li>
...
Here is my app.js
'use strict';
var eventsApp = angular.module('eventsApp', [
'ngRoute',
'ngSanitize',
]);
alert("testing number 1");
eventsApp.config(['$routeProvider', function($routeProvider){
$routeProvider.
when('/Testing', {
templateUrl : 'Views/AngularViews/temp.html',
controller : 'TestingController'
});
}]);
Later on in the app.js....
eventsApp.controller('TestingController',
function($scope) {
alert("testing number 2");
});
Can anyone spot what I'm doing incorrectly? It just isn't working at all. The first alert pops up just fine, the second one never pops up, even after using the correct route.
Thanks in advance.
This is my code in coffeescript that works, I cannot spot any error in your implementation (and since there is no error on console...)
App.config [
'$provide'
'$routeProvider'
($provide, $routeProvider) ->
$routeProvider
.when('/testing', {
templateUrl: 'test.hml'
controller : 'TestingController'
})
]
iDsign.App.controller('TestingController', ($scope)->
alert('something')
)