I have write this "factory" in angularjs
var SimpleHomeCosts=angular
.module('SimpleHomeCosts', [
'ngRoute'
])
.config(function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'views/buys.html',
controller: 'BuysCtrl'
})
.when('/utenti', {
templateUrl: 'views/users.html',
controller: 'UsersCtrl'
})
.when('/negozi', {
templateUrl: 'views/shops.html',
controller: 'ShopsCtrl'
})
.otherwise({
redirectTo: '/'
});
})
.factory("Shop", function () {
var shop={};
return shop;
});
After in my controller I use my "Shop" class factory
SimpleHomeCosts.controller("ShopsCtrl", function ($scope,Shop) {
//================Shops Controller================
console.log(Shop,"shop");
});
this is html (Controller) shops.html
<div ng-controller="ShopsCtrl"></div>
this is index.html
<!doctype html>
<html class="no-js">
<head>
<meta charset="utf-8">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<script src="//angular.localhost:9000/livereload.js"></script>
<link rel="stylesheet" href="/bower_components/bootstrap/dist/css/bootstrap.css">
<link rel="stylesheet" href="styles/main.css">
<!-- endbuild -->
</head>
<body ng-app="SimpleHomeCosts">
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade
your browser</a> to improve your experience.</p>
<![endif]-->
<div class="container" style="border: 0px solid blue">
<div class="row">
<div class="header" style="border: 0px solid green">
<ul class="nav nav-pills pull-right">
<li class="active"><a ng-href="#">Home</a></li>
<li><a ng-href="#/utenti">Utenti</a></li>
<li><a ng-href="#/spese">Spese</a></li>
<li><a ng-href="#/negozi">Negozi</a></li>
</ul>
</div>
</div>
<!-- container view -->
<div class="row" style="border: 0px solid red">
<div ng-view="" class="col-lg-12 col-md-12 col-xs-12"></div>
</div>
<div class="footer">
<!-- <p><span class="glyphicon glyphicon-heart"></span> from the Yeoman team</p> -->
</div>
</div>
<script src="/bower_components/jquery/dist/jquery.js"></script>
<script src="/bower_components/angular/angular.js"></script>
<script src="/bower_components/bootstrap/dist/js/bootstrap.js"></script>
<script src="/bower_components/angular-route/angular-route.js"></script>
<script src="scripts/app.js"></script>
<script src="scripts/controllers/ShopsCtrl.js"></script>
</body>
</html>
If I read into console browser I see:
Object { } shop ShopsCtrl.js (riga 29)
Object { } shop ShopsCtrl.js (riga 29)
Why if I ask only one time the "Shop" angular duplicates my call?
I must remove "ng-controller="ShopsCtrl" from file shops.html
Related
How can i call a function from another file in AngularJs? I'm going to use the same header in all my pages, so i need to call the functions that lives in it.
This is my code so far. First, my index:
<!DOCTYPE html>
<html ng-app="adminApp">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Admin test</title>
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" />
<link type="text/css" href="app/css/admin.css" rel="stylesheet" />
<link type="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/css/bootstrap-datepicker3.standalone.min.css" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css?family=Quicksand&display=swap" rel="stylesheet">
<head>
<base href="/">
</head>
<body>
<div ng-include="'app/components/include/header.html'"></div>
<ng-view></ng-view>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/js/bootstrap-datepicker.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/js/bootstrap-datepicker.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-resource.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-route.min.js"></script>
<script src="app/app.js"></script>
<script src="app/components/home/admin-home.js"></script>
<script src="app/components/include/header.js"></script>
<script src="app/factory/admin-factory.js"></script>
<script src="app/routes/admin-route.js"></script>
</body>
</html>
Then the app.js:
(function(){
'use strict';
angular
.module('adminApp', ['ngResource', 'ngRoute']);
})();
The HTML for the header:
<section class="admin-header">
<div class="row">
<div class="col-lg-9 col-md-9 col-sm-9 col-xs-9">
<h1>Admin test</h1>
</div>
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3" id="login" align="center">
<button type="button" class="btn btn-user" ng-click="open()">
<span class="glyphicon glyphicon-menu-hamburger" aria-hidden="true"></span>
</button>
</div>
</div>
</section>
<div class="menu-out">
<button type="button" class="btn btn-logout">Logout</button>
</div>
Everything until here is ok. Now my doubt is how to call a funtion to toggle the .menu-out div if the header will be separated as all the pages that will live in it?
I've tried with the file header.js like this:
(function(){
var head = {
templateUrl: '/app/components/include/header.html',
controller: headCtrl
};
angular
.module('adminApp')
.component([], head);
headCtrl.$inject = ["$scope"];
function headCtrl($scope){
$scope.open = function(){
$('.menu-out').toggle();
}
}
})();
But is not working. As you can see i've added the brackets in component, 'cause i don't know if i need to call the header from the routes.js file.
This is the route.js file:
(function(){
'use strict';
angular
.module('adminApp')
.config(config);
config.$inject = ["$routeProvider", "$locationProvider"];
function config($routeProvider, $locationProvider){
$locationProvider.hashPrefix('');
$routeProvider
.when('/', {
template: '<admin-home></admin-home>'
})
.otherwise({
redirectTo: '/'
});
}
})();
I need to use $rootScope? Someone can guide me please. As i've said, i'm using AngularJs, HTML and Javscript.
Thanks in advance.
The first argument of the module.component method should be a string to name the component:
angular
.module('adminApp')
̶.̶c̶o̶m̶p̶o̶n̶e̶n̶t̶(̶[̶]̶,̶ ̶h̶e̶a̶d̶)̶;̶
.component("adminHome", head);
For more information, see
AngularJS angular.module Type API Reference - component
I have some unexpected problem with my controller, which occured during building 1st angular project, just like in here: https://www.youtube.com/watch?v=8-ZQHv70BCw&t=2119s
The problem is my link to home page does not load, it has no effect whatsoever, even when console shows the message and does not return any errors. I test this on plunkr.
index.html:
<!DOCTYPE HTML>
<html lang="en" ng-app="computer">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Computer Solutions</title>
<!-- Bootstrap core CSS -->
<link href="bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="style.css" rel="stylesheet">
</head>
<body>
<div class="container">
<!-- The justified navigation menu is meant for single line per list item.
Multiple lines will require custom code not provided by Bootstrap. -->
<div class="masthead">
<h3 class="text-muted">Computer solutions</h3>
<nav>
<ul class="nav nav-justified">
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Contact</li>
</ul>
</nav>
</div>
<div ng-controller='MainCtrl'>
<div ng-view></div>
</div>
<!-- Site footer -->
<footer class="footer">
<p>© 2016 Company, Inc.</p>
</footer>
</div> <!-- /container -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.js"></script>
<script src="https://code.angularjs.org/1.6.1/angular.js"></script>
<script src="https://code.angularjs.org/1.6.1/angular-route.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular-resource.js"></script>
<script src="script.js"></script>
</body>
</html>
script.js
var app = angular.module("computer",['ngRoute'])
.config(['$routeProvider', function($routeProvider){
$routeProvider.
when('/main', {
templateUrl: 'main.html',
controller: 'MainCtrl'
});
}])
.controller('MainCtrl', [function(){
console.log('this is mainctrl');
}]);
and main.html
this is main.
Thanks in advance, Michał
Changed your imports to version 1.4.8. The version you had included seems to have problems on $route definition without a otherwise :
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.js"></script>
I've also added the other states, and should all be working.
app.config(['$routeProvider', function($routeProvider) {
$routeProvider.
when('/main', {
templateUrl: 'main.html',
controller: 'MainCtrl'
}).
when('/about', {
templateUrl: 'about.html',
}).
when('/services', {
templateUrl: 'services.html',
}).
when('/contact', {
templateUrl: 'contact.html',
})
}])
See working version : https://plnkr.co/edit/ebB3GAnoDSunsHK4bpme
I guess u have mentioned Controller(MainCtrl) in html and in routeProvider as well. Try removing one of the places.
check https://stackoverflow.com/a/27314659/3821223
I wrote the following AngularJS routing code and it's not working:
/// <reference path="C:\Users\elwany\documents\visual studio 2015\Projects\spaapplication\spaapplication\scripts/angular.js" />
var myApp = angular.module("myApp", ['ngRoute']);
myApp.config(['$routeProvider',
function($routeProvider){
$routeProvider.
when('/add',{templateurl:'Views/add', controller:'addController'}).
when('/edit',{templateurl:'Views/edit', controller:'editController'}).
when('/delete',{templateurl:'Views/delete', controller:'deleteController'}).
when('/home',{templateurl:'Views/home', controller:'homeController'}).
otherwise({redirectTo :'/home'});
}]);
myApp.controller('addController',function($scope){
$scope.message="in Add view Controller";
});
myApp.controller('editController',function($scope){
$scope.message="in edit view Controller";
});
myApp.controller('deleteController',function($scope){
$scope.message="in delete view Controller";
});
myApp.controller('homeController',function($scope){
$scope.message="in home view Controller";
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title></title>
<meta charset="utf-8" />
<link href="Content/bootstrap.css" rel="stylesheet" />
<script src="scripts/jquery-1.9.0.js"></script>
<script src="scripts/bootstrap.js"></script>
<script src="scripts/angular.js"></script>
<script src="scripts/angular-route.js"></script>
<script src="demo.js"></script>
</head>
<body>
<div class="container">
<nav style="background-color:darkslateblue" role="navigation" class="nav navbar-inverse">
<ul class="nav navbar-nav">
<li class="active">home</li>
<li>add</li>
<li>edit</li>
<li>delete</li>
</ul>
</nav>
<div ng-view>
</div>
<h3 style="font-size:small" class="text-center text-info">developed by Mr-Mohammed Elwany</h3>
</div>
</body>
</html>
And another 4 html <div> in separated 4 HTML pages (add, edit, delete, home) implement this code:
<div class="row jumbotron">
<h2>{{message}}</h2>
</div>
The references should come inside the <body> tag , also you are missing the reference for angular-route
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.js"></script>
</head>
DEMO APP
I am using the Yeoman scaffolding to create an Angular app and I am having some trouble adding a controller. The about and main controllers are added automatically and work fine. And I understand how it works.but I want to arrange the views in one page, so I learn to use angular-ui-router. Finally I made it place all view in on page, when I tried to add another controller in these different views, the issue came out.It didn't work. Thank you for help!
(Sorry, I don't have enough reputation to post an image, so please the links to see the detils)
This pic demonstrate what I what to do.enter image description here
here is my code.enter image description here
index.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
<!-- build:css(.) styles/vendor.css -->
<!-- bower:css -->
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" />
<!-- endbower -->
<!-- endbuild -->
<!-- build:css(.tmp) styles/main.css -->
<link rel="stylesheet" href="styles/main.css">
<!-- endbuild -->
</head>
<body ng-app="angularApp">
<!--[if lte IE 8]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please upgrade your browser to improve your experience.</p>
<![endif]-->
<!-- Add your site or application content here -->
<div class="header">
<div class="navbar navbar-default" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#js-navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#/">angular</a>
</div>
<div class="collapse navbar-collapse" id="js-navbar-collapse">
<ul class="nav navbar-nav">
<!--<li class="active">Home</li>
<li><a ng-href="#/about">About</a></li>
<li><a ng-href="#/">Contact</a></li>-->
</ul>
</div>
</div>
</div>
</div>
<div class="container-fluid">
<div ui-view=""></div>
</div>
<!-- Google Analytics: change UA-XXXXX-X to be your site's ID -->
<script>
!function(A,n,g,u,l,a,r){A.GoogleAnalyticsObject=l,A[l]=A[l]||function(){
(A[l].q=A[l].q||[]).push(arguments)},A[l].l=+new Date,a=n.createElement(g),
r=n.getElementsByTagName(g)[0],a.src=u,r.parentNode.insertBefore(a,r)
}(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-XXXXX-X');
ga('send', 'pageview');
</script>
<!-- build:js(.) scripts/vendor.js -->
<!-- bower:js -->
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.js"></script>
<script src="bower_components/angular-animate/angular-animate.js"></script>
<script src="bower_components/angular-aria/angular-aria.js"></script>
<script src="bower_components/angular-cookies/angular-cookies.js"></script>
<script src="bower_components/angular-messages/angular-messages.js"></script>
<script src="bower_components/angular-resource/angular-resource.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="bower_components/angular-sanitize/angular-sanitize.js"></script>
<script src="bower_components/angular-touch/angular-touch.js"></script>
<script src="bower_components/angular-ui-router/release/angular-ui-router.js"></script>
<!-- endbower -->
<!-- endbuild -->
<!-- build:js({.tmp,app}) scripts/scripts.js -->
<script src="scripts/app.js"></script>
<script src="scripts/controllers/menus/plan.js"></script>
<!-- endbuild -->
</body>
</html>
app.js
'use strict';
angular
.module('angularApp', [
'ngAnimate',
'ngAria',
'ngCookies',
'ngMessages',
'ngResource',
'ngSanitize',
'ngTouch',
'ui.router'
])
.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/index');
$stateProvider
.state('index', {
url: '/index',
views: {
'': {
templateUrl: 'views/index.html'
},
'planMap#index': {
templateUrl: 'views/menus/plan.html'
},
'3DManage#index': {
templateUrl: 'views/menus/3DManage.html'
},
'querys#index': {
templateUrl: 'views/menus/querys.html'
},
'layers#index': {
templateUrl: 'views/menus/layers.html'
},
'toolBar#index': {
templateUrl: 'views/toolBar.html'
},
'terraView#index': {
templateUrl: 'views/terraView.html'
}
}
});
});
index.html
<div class="FMenu">
<div ui-view="planMap" ></div>
<div ui-view="3DManage"></div>
<div ui-view="querys"></div>
<div ui-view="layers"></div>
</div>
<div class="main-view">
<div class="tool-bar" ui-view="toolBar"></div>
<div class="terra-view" ui-view="terraView"></div>
</div>
views/menus/plan.html
<div ng-controller='SomeController'>
<expander class='expander' expander-title='title'>
{{text}}
</expander>
</div>
controller/menus/plan.js
'use strict';
var angularApp = angular.module('angularApp', []);
angularApp.directive('expander', function() {
return {
restrict : 'EA',
replace : true,
transclude : true,
scope : {
title : '=expanderTitle'
},
template : '<div>' +
'<div class="title" ng-click="toggle()">{{title}}</div>' +
'<div class="body" ng-show="showMe" ng-transclude>' +
'</div>' +
'</div>',
link : function(scope) {
scope.showMe = false;
scope.toggle = function() {
scope.showMe = !scope.showMe;
};
}
};
});
angularApp.controller('PlanController',function($scope) {
$scope.title = '点击展开';
$scope.text = '这里是内部的内容。';
});
Helo,
I am new to AngularJS, and I just started using $mdToast basic function Show(). Here is my complete code for this problem, hope you can help me.
'use strict';
// Declare app level module which depends on views, and components
angular.module('myApp', [
'ngAnimate', 'ui.bootstrap', 'ngCookies',
'ngRoute', 'ngMaterial', 'ngAria', 'ngMessages',
'myApp.view0',
'myApp.view1',
'myApp.view2',
'myApp.version',
'myApp.view3',
'myApp.view4',
'myApp.view5',
'myApp.view6'
])
.run(function ($rootScope, $cookies, $http) {
$rootScope.loggedin = false;
$rootScope.loggedinUser = {};
var loginCredentials = $cookies.get('logincredentials');
$http.get('https://localhost:8181/WebApplicationStom/webresources/domain.login', {headers: {
Authorization: loginCredentials
}}).success(function (data) {
if (data.ime == '123') {
$rootScope.loggedinUser = data;
$rootScope.loggedin = true;
} else {
$rootScope.loggedin = false;
$rootScope.loggedinUser = {};
}
});
})
.config(['$routeProvider', function ($routeProvider) {
$routeProvider.otherwise({redirectTo: '/view0'});
}])
.controller('LoginCtrl', ['$scope', '$uibModal', '$log', '$rootScope', '$http', '$cookies', '$mdToast', function ($scope, $uibModal, $log, $rootScope, $http, $cookies, $mdToast) {
$scope.animationsEnabled = true;
$scope.username = '';
$scope.password = '';
$scope.dialogMessage;
$scope.logout = function () {
$rootScope.loggedinUser = {};
$rootScope.loggedin = false;
$cookies.remove('logincredentials');
}
$scope.login = function () {
if ($scope.username != '' && $scope.password != '') {
$http.get('https://localhost:8181/WebApplicationStom/webresources/domain.login', {headers: {
Authorization: $scope.username + ':' + $scope.password
}}).success(function (data) {
if (data.ime == '123') {
$rootScope.loggedin = true;
$rootScope.loggedinUser = data;
$cookies.put('logincredentials', '1:1');
} else {
$rootScope.loggedin = false;
$rootScope.loggedinUser = {};
$scope.dialogMessage = 'Uneli ste pogresan username i/ili password';
}
});
} else {
$scope.dialogMessage = 'Unesite username i password';
}
}
$scope.open = function (size) {
$scope.modalInstance = $uibModal.open({
animation: $scope.animationsEnabled,
templateUrl: 'myModalContent.html',
controller: 'ModalInstanceCtrl',
size: size,
resolve: {
items: function () {
return $scope.items;
}
}
});
};
$scope.openToast = function () {
$mdToast.show('Hello!');
};
}])
.controller('ModalInstanceCtrl', function ($scope, $uibModalInstance, items, $rootScope) {
$scope.cancel = function () {
$uibModalInstance.dismiss('cancel');
};
});
<!DOCTYPE html>
<!--[if lt IE 7]> <html lang="en" ng-app="myApp" class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html lang="en" ng-app="myApp" class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html lang="en" ng-app="myApp" class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html lang="en" ng-app="myApp" class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Stomatoloska ordinacija</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="bower_components/html5-boilerplate/dist/css/normalize.css">
<link rel="stylesheet" href="bower_components/html5-boilerplate/dist/css/main.css">
<link rel="stylesheet" href="app.css">
<script src="bower_components/html5-boilerplate/dist/js/vendor/modernizr-2.8.3.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/0.11.2/angular-material.min.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet">
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.14.3.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
<script src="http://ui-grid.info/release/ui-grid.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://ui-grid.info/release/angular-ui-grid/ui-grid.min.css">
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular-cookies.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-touch.js"></script>
<script src="http://ui-grid.info/docs/grunt-scripts/csv.js"></script>
<script src="http://ui-grid.info/docs/grunt-scripts/pdfmake.js"></script>
<script src="http://ui-grid.info/docs/grunt-scripts/vfs_fonts.js"></script>
<script src="http://ui-grid.info/release/ui-grid.js"></script>
<link rel="stylesheet" href="http://ui-grid.info/release/ui-grid.css" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/0.11.2/angular-material.min.js"></script>
<link href="css/bootstrap.min.css" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
</head>
<body>
<nav class="navbar navbar-default ">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#/view0">Home</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li>Mesto</li>
<li>Lekar</li>
<li>Pacijent</li>
<li>Usluga</li>
<li>Poseta</li>
<li>view6</li>
</ul>
<div ng-controller="LoginCtrl">
<ul class="nav navbar-nav navbar-right">
<li><span class="glyphicon glyphicon-log-in"></span> Login/Logout</li>
<li><a ><span class="glyphicon glyphicon-user"></span> {{loggedinUser.user}}</a></li>
</ul>
</div>
</div>
</div>
</nav>
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please upgrade your browser to improve your experience.</p>
<![endif]-->
<div class="page">
<md-button class="md-raised md-primary">Primary</md-button>
<div ng-controller="LoginCtrl" >
<md-button ng-click="openToast()">
Open a Toast!
</md-button>
<script type="text/ng-template" id="myModalContent.html">
<div ng-controller="LoginCtrl">
<div class="container">
<div id="loginbox" class="mainbox col-md-6 col-md-offset-3 col-sm-6 col-sm-offset-3">
<button type="button" class="close" data-dismiss="modal" ng-click="cancel()"><span aria-hidden="true">×</span></button>
<div class="panel panel-default" >
<div class="panel-heading">
<div class="panel-title text-center">Login/Logout</div>
</div>
<div class="panel-body" >
<form name="form" id="form" class="form-horizontal" enctype="multipart/form-data" method="POST">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<input id="user" type="text" class="form-control" name="user" value="" placeholder="User" ng-model="username">
</div>
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span>
<input id="password" type="password" class="form-control" name="password" placeholder="Password" ng-model="password">
</div>
<div class="form-group">
<!-- Button -->
<div>
<h4>{{dialogMessage}}</h4>
</div>
<div class="col-sm-12 controls">
<button type="button" class="btn btn-danger" ng-click="cancel();logout();"><i class="glyphicon glyphicon-log-in"></i> Logout</button>
<button type="button" class="btn btn-primary pull-right" ng-click="cancel();login()"><i class="glyphicon glyphicon-log-in"></i> Login</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</script>
</div>
<div class="footer navbar-fixed-bottom">
<div id="footer">Angular seed app: v<span app-version></span></div>
</div>
<!-- In production use:
<script src="//ajax.googleapis.com/ajax/libs/angularjs/x.x.x/angular.min.js"></script>
-->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-aria.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-animate.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-messages.min.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-114/assets-cache.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="app.js"></script>
<script src="view0/view0.js"></script>
<script src="view1/view1.js"></script>
<script src="view2/view2.js"></script>
<script src="view3/view3.js"></script>
<script src="view4/view4.js"></script>
<script src="view5/view5.js"></script>
<script src="view6/view6.js"></script>
<script src="components/version/version.js"></script>
<script src="components/version/version-directive.js"></script>
<script src="components/version/interpolate-filter.js"></script>
</body>
</html>
So the problem is not with the libraries included, i tried that and it didnt work. I should also mention that I am using angularJS seed as a child of project.
Thank you for your time.
Toast require modules ngMaterial', 'ngMessages'. I think you should get rid of assets-cache.js which is used by ngmaterial in default in codepen sample . In assets-cache.js you have a "MyApp" module defined in it . and redefining this module again in your file gives error.Try avoiding file and add ngMaterial', 'ngMessages' module dependencies to your module . This should definitely solve your problem.
Here is a sample codepen
Just click on "Settings" button on codepen, go to javascript tab and make sure you've got all of these dependencies included in your html.
Error tells you don't have it imported properly.
The toast is probaly displayed behind another element. Use parent to append your toast to an HTML element:
$scope.showSimpleToast = function () {
$mdToast.show($mdToast.simple().textContent('Hello!').parent("#HTMLelemID"));
};
parent() appends toast to the root element of the application by default.
Access $mdToast documentation here