I am totally new to angularjs. I am just trying to load an external javascript file using requirejs. I have tried something but its not helping me.
Here is my folder structure:
angular-seed
-app
-bowercomponents
-requirejs
-view1
-view1.html
-view1.js
-view1test1.js
I want to load view1test1.js file in my view1.html
Here is my index.html:
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>My AngularJS App</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="bower_components/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="app.css">
<link rel="stylesheet" href="/css/style1.css">
<script src="bower_components/html5-boilerplate/dist/js/vendor/modernizr-2.8.3.min.js"></script>
<script data-main="/app" src="bower_components/requirejs/require.js"></script>
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Page 1</li>
<li>Page 2</li>
</ul>
</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 ng-view></div>
<!-- In production use:
<script src="//ajax.googleapis.com/ajax/libs/angularjs/x.x.x/angular.min.js"></script>
-->
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="app.js"></script>
<script src="view1/view1.js"></script>
<script src="view2/view2.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>
Here is my app.js
'use strict';
angular.module('myApp', [
'ngRoute',
'myApp.view1',
'myApp.view2',
'myApp.version'
]).
config(['$routeProvider', function($routeProvider) {
$routeProvider.otherwise({redirectTo: '/view1'});
}]);
g(['$routeProvider', function($routeProvider) {
$routeProvider.otherwise({redirectTo: '/view1'});
}]);
requirejs(["view1/view1test1.js"], function(util) {
});
Here is my view1test1.js:
function(util){
var barChartData = {
labels : ["No. of sign-ups","Daily active users","Average time active","Total time run","Total distance covered","10K activated"],
datasets : [
{
fillColor : "#dd4b39",
strokeColor : "#dd4b39",
data : [10000,13000,56081,42001,5000,40000]
},
{
fillColor : "#f39c12",
strokeColor : "#f39c12",
data : [40000,70000,55000,21001,45023,70121,60093]
},
{
fillColor : "#00a65a",
strokeColor : "#00a65a",
data : [43010,75432,50966,66300,39000,12010,33098]
}
]
};
new Chart(document.getElementById("bar").getContext("2d")).Bar(barChartData);
}
I found some examples in which they have used some dependency, but i didn't understand it. So can anybody tell me what i am doing wrong?
Related
contact.js --- this is angular file. i am trying to make my contact app .
'use strict';
angular.module('myContacts.contacts', ['ngRoute','firebase'])
.config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/contacts', {
templateUrl: 'contacts/contacts.html',
controller: 'ContactsCtrl'
});
}])
.controller('ContactsCtrl', ['$scope', '$firebaseArray', function($scope, $firebaseArray) {
var rel = new Firebase('https://mycontact-app007.firebaseio.com/contacts');
$scope.contacts = $firebaseArray(rel);
console.log($scope.contacts);
}]);
Index.html - this the index file
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Mycontacts App</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="app.css">
<link rel="stylesheet" href="bower_components/foundation/css/foundation.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="large-12 columns">
<h1>myContact</h1>
<hr>
</div>
</div>
<div ng-view></div>
</div>
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="lib/angular/angular.js"></script>
<script src="lib/angular-route/angular-route.js"></script>
<script src="bower_components/foundation/js/foundation.js"></script>
<script src="bower_components/firebase/firebase.js"></script>
<script src="bower_components/angularfire/dist/angularfire.js"></script>
<script src="app.js"></script>
<script src="contacts/contacts.js"></script>
</body>
</html>
showing ReferenceError- Firebase is not defined
at new (contacts.js:13)
i am trying to make CURD operation app
I am trying to make a single page web site with angular, bootstrap. I was trying to include a carousel in the first page and with ngRouting does not work. I have read somewhere here that i need to use ui.bootstrap to make carousel work with routing.
I am a beginner in angular. This is my index.html:
<!DOCTYPE html>
<html lang="en" ng-app="mainApp">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>My web page</title>
<!-- load angular, ui-bootstrap and angular-route -->
<script src="js/angular.min.1.5.8.js"></script>
<script src="js/angular-animate.min.1.5.8.js"></script>
<script src="js/angular-route.min.js"></script>
<script src="js/ui-bootstrap-tpls-2.3.0.min.js"></script>
<script src="js/app.js"></script>
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="css/modern-business.css" rel="stylesheet">
<!-- Custom Fonts -->
<link href="font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!-- Navigation bar-->
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
CODE
</nav>
<!-- ngRoute -->
<div ng-view></div>
<!-- jQuery and Bootstrap -->
<script src="js/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
And my app.js:
var app = angular.module('mainApp', ['ngRoute','ui.bootstrap','ngAnimate']);
// angular routing
app.config(function($routeProvider) {
$routeProvider
.when("/", {
templateUrl : "pages/main.html"
})
.when("/prezentare", {
templateUrl : "pages/AnotherPage.html"
})
.when("/green", {
templateUrl : "pages/green.html"
})
.when("/blue", {
templateUrl : "pages/blue.html"
});
});
// angular ui.bootstrap
app.controller('CarouselCtrl', function($scope) {
$scope.myInterval = 5000;
$scope.noWrapSlides = false;
$scope.active = 0;
var slides = $scope.slides = [];
slides.push(
{ image_url: '#/img/header1.png' },
{ image_url: '#/img/header2.png' }
);
});
and of course the main.html
<!-- New Carousel - UI-Bootstrap -->
<div ng-controller="CarouselCtrl">
<div style="height: 350px">
<div uib-carousel active="active" interval="myInterval" no-wrap="noWrapSlides">
<div uib-slide ng-repeat="slide in slides">
<img ng-src="{{slide.image_url}}" style="margin:auto;">
<</div>
</div>
</div>
</div>
<!-- Page Content -->
<div class="container"> other code </div>
Please tell my what i have doing wrong??? The carousel is not showing (only the 2 side arrows). Using ui.bootstrap, the carousel will be responsive too right?
The following HTML results in error: Unable to get property 'top' of undefined or null reference, when you set your browser to emulate a tablet such as an IPad.
Codepen is here
http://codepen.io/jcbowyer/pen/wGrLmE
<html>
<head>
<meta charset="utf-8">
<title>Kendo UI Mobile Loves AngularJS</title>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1029/styles/kendo.mobile.all.min.css">
<!-- the application CSS file -->
<link rel="http://demos.telerik.com/kendo-ui/content/mobile/apps/sushi/css/style.css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular.js"></script>
<script src="http://cdn.kendostatic.com/2014.3.1029/js/kendo.all.min.js"></script>
</head>
<body kendo-mobile-application ng-app="sushiMobileApp">
<kendo-mobile-view id="index">
<kendo-mobile-header>
<kendo-mobile-nav-bar>
Home View
<button kendo-mobile-button k-align="'right'" data-icon="'contacts'" id="btnProfile" k-on-click="mnuProfile.open($('#btnProfile'))"></button>
</kendo-mobile-nav-bar>
</kendo-mobile-header>
<ul kendo-mobile-action-sheet="mnuProfile" k-on-command="onCommand(kendoEvent)" k-type="'auto'">
<li>Login</li>
<li ng-hide="(authentication.token.length == 0)">Logout</li>
<li>My Profile</li>
</ul>
</kendo-mobile-view>
<script>
angular.module('sushiMobileApp', [ 'kendo.directives' ]);
</script>
</body>
</html>
I figured out how to get this work with k-rel insteal of open.
Updated code is below
Codepen here
http://codepen.io/jcbowyer/pen/KzyQwa
<html>
<head>
<meta charset="utf-8">
<title>Kendo UI Mobile Loves AngularJS</title>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1029/styles/kendo.mobile.all.min.css">
<!-- the application CSS file -->
<link rel="http://demos.telerik.com/kendo-ui/content/mobile/apps/sushi/css/style.css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular.js"></script>
<script src="http://cdn.kendostatic.com/2014.3.1029/js/kendo.all.min.js"></script>
</head>
<body kendo-mobile-application ng-app="sushiMobileApp">
<kendo-mobile-view id="index">
<kendo-mobile-header>
<kendo-mobile-nav-bar>
Home View
<a kendo-mobile-button k-align="'right'" data-icon="'contacts'" id="btnProfile"
k-rel="'actionsheet'"
href="#mnuProfile"></a>
</kendo-mobile-nav-bar>
</kendo-mobile-header>
<ul kendo-mobile-action-sheet="mnuProfile" id="mnuProfile" k-on-command="onCommand(kendoEvent)" k-type="'auto'">
<li>Login</li>
<li ng-hide="(authentication.token.length == 0)">Logout</li>
<li>My Profile</li>
</ul>
</kendo-mobile-view>
<script>
angular.module('sushiMobileApp', [ 'kendo.directives' ]);
</script>
</body>
</html>
I'm doing a single page application using AngularJS. On my index.html I'm using an ng-view direction to show the header section. The navigation section is defined as a ul element with a bunch of li elements that represents navigation links. I have a ng-class on each li element that needs to set the class to active. Based on my code, it does, but it doesn't appear on the page until after I click on the page. Provided is my code, please help. Thank you in advance
index.html
<!DOCTYPE html>
<html lang="en">
<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>Bootstrap 1 Template</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="css/font-awesome.min.css" />
<link rel="stylesheet" href="css/font-awesome.css" />
<link rel="stylesheet" href="js/fancybox/jquery.fancybox.css" type="text/css" media="screen" />
<link rel="stylesheet" type="text/css" href="css/isotope.css" media="screen" />
<link rel="stylesheet" href="css/style.css">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular.min.js"></script>
</head>
<body ng-app="appMod">
<!-- Start: Header -->
<div ng-include="'templates/header.html'"></div>
<!-- End: Header -->
<!-- Start: Content -->
<div ng-view></div>
<!-- End: Content -->
<!-- Start: Footer -->
<div ng-include="'templates/footer.html'"></div>
<!-- End: Footer -->
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.isotope.min.js"></script>
<script src="js/fancybox/jquery.fancybox.pack.js"></script>
<script src="js/wow.min.js"></script>
<!-- Vendor: Angular, followed by our custom Javascripts -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular-route.min.js"></script>
<!-- parent angular module and controller that supports SPA (Single Page Application) -->
<script src="app/appMod.js"></script>
<script src="templates/TemplateCtrl.js"></script>
<script src="app/home/HomeCtrl.js"></script>
<script src="app/blog/BlogCtrl.js"></script>
<script src="js/functions.js"></script>
</body>
</html>
templates/header.html
<header >
<div class="main-menu" >
<div class="container">
<div class="row">
<div class="col-md-4">
<h1><a class="navbar-brand" href="index.html" data-0="line-height:90px;" data-300="line-height:50px;"> Hidayah
</a></h1>
</div>
<div class="col-md-8">
<div class="dropdown">
<ul class="nav nav-pills" ng-controller="TemplateHeadCtrl">
<li ng-repeat="NavLink in NavLinks" ng-class="IsSelected(NavLink)">
{{NavLink.LinkTitle}}
</li>
<!-- <li id='liHome' class="active"></li>
<li id='liPortfolio'>Portfolio</li>
<li id='liBlog'>Blog</li>
<li id='liContact'>Contact</li>-->
</ul>
</div>
</div>
</div>
</div>
</div>
</header>
templates/TemplateCtrl.js
app.controller("TemplateHeadCtrl", ['$scope','$http', function($scope,$http){
$scope.NavLinks = [
{
"LinkTitle": "Home",
"LinkURL": "#/",
"LinkID": "liHome"
},
{
"LinkTitle": "Portfolio",
"LinkURL": "#Portfolio",
"LinkID": "liPortfolio"
},
{
"LinkTitle": "Blog",
"LinkURL": "#Blog",
"LinkID": "liBlog"
},
{
"LinkTitle": "Contact",
"LinkURL": "#Contact",
"LinkID": "liContact"
},
{
"LinkTitle": "Contact1",
"LinkURL": "#Contact1",
"LinkID": "liContact1"
}
];
/*
$scope.NavLinks = function () {
alert("here")
return $http.get('/NavLinks.json').then(function (response) {
alert("here")
return response.data;
}).catch(function (fallback) {
alert("Oops an error has occured. ")
});
};*/
$scope.SetMaster = function(section){
$scope.SelectedSection = section;
};
$scope.IsSelected = function(section){
return $scope.SelectedSection === section? 'active': '';
};
}]);
Also for some reason the $scope.NavLinks function does not work either. I have it commented it out in my code. The NavLinks.json is located under the same folder of TemplateCtrl.js
$scope.NavLinks = function () {
alert("here")
return $http.get('/NavLinks.json').then(function (response) {
alert("here")
return response.data;
}).catch(function (fallback) {
alert("Oops an error has occured. ")
});
};
Make change in 'templates/header.html' like this:
<li ng-repeat="NavLink in NavLinks" ng-class="{active : IsSelected(NavLink)}">
{{NavLink.LinkTitle}}
</li>
And in 'templates/TemplateCtrl.js':
$scope.IsSelected = function(section){
return $scope.SelectedSection.LinkID == section.LinkID;
};
I'm getting an error trying to use ui.router:
Uncaught Error: [$injector:modulerr] Failed to instantiate module bApp due to:
Error: [$injector:unpr] Unknown provider: $stateProvider
http://errors.angularjs.org/1.4.5/$injector/unpr?p0=%24stateProvider
at REGEX_STRING_REGEXP (http://localhost:9000/bower_components/angular/angular.js:68:12)
at http://localhost:9000/bower_components/angular/angular.js:4284:19
at getService (http://localhost:9000/bower_components/angular/angular.js:4432:39)
at Object.invoke (http://localhost:9000/bower_components/angular/angular.js:4464:13)
at runInvokeQueue (http://localhost:9000/bower_components/angular/angular.js:4379:35)
at http://localhost:9000/bower_components/angular/angular.js:4388:11
at forEach (http://localhost:9000/bower_components/angular/angular.js:336:20)
at loadModules (http://localhost:9000/bower_components/angular/angular.js:4369:5)
at createInjector (http://localhost:9000/bower_components/angular/angular.js:4294:11)
at doBootstrap (http://localhost:9000/bower_components/angular/angular.js:1655:20)
http://errors.angularjs.org/1.4.5/$injector/modulerr?p0=bApp&p1=Error%3A%20…F%2Flocalhost%3A9000%2Fbower_components%2Fangular%2Fangular.js%3A1655%3A20)
angular.module('bApp', ['ui.router']);
angular.module('bApp').config(function($stateProvider, $urlRouterProvider) {
urlRouterProvider.otherwise('/');
$stateProvider
.state('main', {
url: "/",
templateUrl: "/views/main.html"
})
.state('register', {
url: "/register",
templateUrl: "/views/register.html"
});
});
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<!-- 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/bootstrap-hero.css">
<link rel="stylesheet" href="styles/main.css">
<!-- endbuild -->
<!-- build:js(.) scripts/vendor.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-ui-router/release/angular-ui-router.js"></script>
<!-- endbuild -->
</head>
<body ng-app="bApp">
<!--[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">
<a class="navbar-brand" href="#/">b</a>
</div>
<ul class="nav navbar-nav">
<li><a ui-sref="main">Home</a></li>
<li><a ui-sref="register">Register</a></li>
</ul>
</div>
</div>
</div>
<div ui-view></div>
<!-- build:js({.tmp,app}) scripts/scripts.js -->
<script src="scripts/app.js"></script>
<script src="scripts/controllers/main.js"></script>
<script src="scripts/controllers/register.js"></script>
<script src="scripts/app.config.js"></script>
<!-- endbuild -->
</div>
</body>
</html>
I'm trying to use ui.router but it is failing.
Because your angular script tags are in the html head, there is slight chance that not all modules are done loading when they are being used.
According to Where should I put <script> tags in HTML markup?, you have two options here:
1. Add a defer to your script tags in the head, which might not work for all browsers:
<script src="bower_components/jquery/dist/jquery.js" defer></script>
<script src="bower_components/angular/angular.js" defer></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.js" defer></script>
<script src="bower_components/angular-ui-router/release/angular-ui-router.js" defer></script>
2. Put them at the bottom of your body. This will work for all browsers.
...
<script src="bower_components/jquery/dist/jquery.js" defer></script>
<script src="bower_components/angular/angular.js" defer></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.js" defer></script>
<script src="bower_components/angular-ui-router/release/angular-ui-router.js" defer></script>
<!-- build:js({.tmp,app}) scripts/scripts.js -->
<script src="scripts/app.js"></script>
<script src="scripts/controllers/main.js"></script>
<script src="scripts/controllers/register.js"></script>
<script src="scripts/app.config.js"></script>
<!-- endbuild -->
</div>
</body>
try to install angular router without ui
https://github.com/angular/bower-angular-route
don't forget include it in project then.
<script src="/js/bower_components/angular-route/angular-route.js"></script>