So I have this simple code in angular that works on jsfiddle as you can see by pressing Run code snippet:
function ContactController($scope) {
$scope.contact = 0;
$scope.add = function() {
$scope.contact += 1;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="" ng-controller="ContactController">
<button ng-click="add()">Add</button>
<div>{{ contact }}</div>
</div>
But when I try to use it in my Ionic app, it doesn't work. This is my complete index.html file:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
<link href="css/ionic.app.css" rel="stylesheet">
-->
<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<!-- your app's js -->
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
<script src="js/services.js"></script>
</head>
<body id="body">
<div ng-app="" ng-controller="ContactController">
<button ng-click="add()">Add</button>
<div> {{ contact }} </div>
</div>
<script>
function ContactController($scope) {
$scope.contact = 0;
$scope.add = function() {
$scope.contact+=1;
}
}
</script>
</body>
</html>
Can anyone please tell me what I need to include in index.html in order for angular to work?
yes you need to initialize your app. in your app.js file you should see
angular.module('starter', ['ionic'])
so in your index.html you have ng-app=""
that needs to say
ng-app="starter"
You're html should look like this:
<div ng-app="starter" ng-controller="ContactController">
<button ng-click="add()">Add</button>
<div> {{ contact }} </div>
</div>
right now nothing is being bootstrapped and angular is not being attached to the page.
Related
Having tough times learning React. So I started to rewrite simple HTML + JavaScript page with React.
I want to prerender the html markup before the div with main application. I found that library with custom fonts (simple-line-icons) doesn't load in a way how I've done this. But if I put this <div className="loadicon icon-arrow-left wow tada infinite" data-wow-duration="8s"></div> div inside a component, the fonts are loaded fine. Here is the code of index.html how it looks now:
<!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">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css">
<link rel="stylesheet" href="css/preloader.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/responsive.css">
<link rel="stylesheet" href="css/animate.css">
<link rel="stylesheet" href="css/simple-line-icons.css">
<!--[if lt IE 9]>
<script>
(function(){
var ef = function(){};
window.console = window.console || {log:ef,warn:ef,error:ef,dir:ef};
}());
</script>
<script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.2/html5shiv-printshiv.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/es5-shim/3.4.0/es5-shim.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/es5-shim/3.4.0/es5-sham.js"></script>
<![endif]-->
<script>
(function (i, s, o, g, r, a, m) {
Google Analytics code
});
</script>
</head>
<body data-spy="scroll">
<div id="preloader">
<div id="status_first">
<div className="loadicon icon-arrow-left wow tada infinite" data-wow-duration="8s"></div>
</div>
<div id="status_second">
<div className="wow tada infinite" data-wow-duration="8s">K</div>
</div>
<div id="status_third">
<div className="loadicon icon-arrow-right wow tada infinite" data-wow-duration="8s"></div>
</div>
</div>
<div id="app">
</div>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="js/jquery.nicescroll.min.js"></script>
<script src="js/plugins.js"></script>
<script src="//cdn.rawgit.com/noelboss/featherlight/1.7.8/release/featherlight.min.js" type="text/javascript" charset="utf-8"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/detect_swipe/2.1.1/jquery.detect_swipe.min.js"></script>
<script src="js/js.cookie.js" charset="utf-8" type="text/javascript"></script>
<script src="js/jquery-lang.js" charset="utf-8" type="text/javascript"></script>
</body>
</html>
so, the task is simply perrender this piece of code:
<div id="status_first">
<div className="loadicon icon-arrow-left wow tada infinite" data-wow-duration="8s"></div>
</div>
<div id="status_second">
<div className="wow tada infinite" data-wow-duration="8s">K</div>
</div>
<div id="status_third">
<div className="loadicon icon-arrow-right wow tada infinite" data-wow-duration="8s"></div>
</div>
How it could be done in simple way? Need a working example please
Well, I've solved it by moving the html code to the first child component of the App.
I can not create complex data models in my controllers.
every time I create them the code seems to fail silently
simple data models like
$scope.conversationList = [123456];
work just fine both using ng-bind & using it in a directive template.
but the moment I change them to {{conversationList.conversation}} they fail silently and my ngbind is emptied and the template displays
"{{conversationList.conversataion}}" in plain text.
I don't know what is wrong. Every example I can find looks like I formatted the models correctly it keeps failing.
Thank you for your help
Controller
/* global angular */
'use strict';
app.controller('conversationListCtrl', ['$scope', function ($scope) {
$scope.conversationList = [
{
conversation2: 123456789,
conversation:
{
id: "bestbuy",
messageId: 123456,
subscriber: "Billy Madison",
subscriptionType: "summerPass",
conversationImage: "insert Image"
}
}
]
}
])
.directive('listCtrl', function () {
return {
scope: false,
template: '<div> {{conversationList.conversation}} </div>'
}
});
Index.html
<!doctype html>
<html ng-app="ChatApp" class="angularjs ng-scope">
<head>
<meta charset="utf-8">
<title>ClearKey Test Message</title>
<meta name="description" content="Layer Angular example">
<link rel="shortcut icon" href="http://static.layer.com/web/favicon.png">
<link href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,600" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Raleway:300,400" rel="stylesheet" type="text/css">
<link href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<!-- Common CSS and Identity dialog -->
<link href="common/style.css" rel="stylesheet">
<!-- Layer Web SDK -->
<script src='vendors/layer-websdk.min.js'></script>
<script src='vendors/angular.js'>
//checked
</script>
<script src='vendors/angular-route.js'>
</script>
<script src='vendors/ng-infinite-scroll.min.js'></script>
<script src='vendors/stop-angular-overrides.js'></script>
<!-- Angular app -->
<script src='js/app.js'></script>
<script src="jquery-3.1.1.min.js"></script>
<script src="js/models/conversation.js"></script>
</head>
<body class="ng-scope" cz-shortcut-listen="true">
<!-- ^^^used to have appCtrl^^^ -->
<div class="main-app" ng-include="'views/app.html'"></div>
</body>
</html>
App.html
<div src="jquery-3.1.1.min.js">
<!-- ^^^needs appctrl controller^^^ -->
<div class="messenger">
<div class="left-panel">
<div class="Message-item">
<div class="imgContainer"> <img class="cornerImage" src="images/favicon.png" /> </div>
</div>
<div >
<!-- ^^^had the conversationListCtrl^^^ -->
<div class="panel-header conversations-header"
>
<!-- ^^^had the partials for the left column header^^^ -->
</div>
<div ng-controller="conversationListCtrl" class="conversation-list">
<div list-Ctrl ></div>
<div ng-model="conversationList" class="conversation-list" style="border:dashed" ng-bind="{{conversationList.conversation}}"></div>
</div>
<!-- had the partials for conversationlist.html -->
</div>
</div>
<div class="right-panel" >
<div
>
<!-- had the partials for the messages that were in each conversation -->
</div>
</div>
</div>
</div>
You need to define element which you want to access -
Replace - {{conversationList.conversation}}
With - {{conversationList.conversation.id}} or {{conversationList.conversation.messageId}}
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?
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="UTF-8">
<title> Angular JavaScript! </title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
</head>
<body>
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript" src="script.js"></script>
<div class="container">
<input class="form-control" ng-model="Firstname" />
{{Firstname}}
</div> <!-- container -->
</body>
</html>
my script.js
var app = angular.module('myApp'. []);
app.controller('myCtrl', function($scope){
$scope.Firstname = "guidy";
$scope.Lastname = "manson";
})
I've been trying to find a for solution for this for hours and I just can't find any.
My problem is that the data binding suddenly isn't working after I put ng-app="myApp" in my Html tag. However, when I put it this way: ng-app="", the data binding is already working. Can you guys figure out why angularjs data-binding is not working after I put or identify "myApp" in my ng-app?
var app = angular.module('myApp'. []);
This should have a comma and not a dot
var app = angular.module('myApp', []);
Also add ng-controller="myCtrl" to your view
you should add ng-controller directive to your view.
<body ng-controller="myCtrl">
<div class="container">
<input class="form-control" ng-model="Firstname" />
{{Firstname}}
</div> <!-- container -->
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript" src="script.js"></script>
</body>
I couldn't make a simple AngularJS to work on my ionic application. It is saying the function got undefined.
First these are the essential files for my project
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<link href="css/glsmile.css" rel="stylesheet">
<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
<link href="css/ionic.app.css" rel="stylesheet">
-->
<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<!-- your app's js -->
<script src="js/app.js"></script>
<script src="js/main.js"></script>
</head>
<body ng-app="">
<ion-pane>
<ion-header-bar class="bar-stable">
<h1 class="title">GL Smile Filter</h1>
</ion-header-bar>
<ion-content>
<div id="wrapper">
{{1+1}}
<div ng-controller="StoreController">
</div>
<select>
<option selected>Choose your region</option>
<option>Mississsauga</option>
<option>North York</option>
</select>
<br>
<select>
<option selected>School near by</option>
<option>University Of Toronto</option>
<option>Waterloo</option>
<option>Sheridan College</option>
</select>
<input type="range" name="rangePrice" min="0" max="600" id="rangePrice"
oninput="showVal(this.value)" onchange="showVal(this.value)">
<p div style="display:inline; float:left;">$0</p> <p div style="display:inline; float:right;">$600</p>
<div style="clear: both"></div>
<span id="amount">Amount:</span> <span id="valBox">$300</span>
<button class="button button-small button-royal" id="buttonGo" style="float:right;">
Go
</button>
</div>
<i class="icon ion-star"></i>
</ion-content>
</ion-pane>
<script>
function showVal(newVal){
document.getElementById("valBox").innerHTML="$" + newVal;
}
</script>
</body>
</html>
App.js
// Ionic Starter App
// angular.module is a global place for creating, registering and retrieving Angular modules
// 'starter' is the name of this angular module example (also set in a <body> attribute in index.html)
// the 2nd parameter is an array of 'requires'
angular.module('starter', ['ionic'])
.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
// for form inputs)
if(window.cordova && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
}
if(window.StatusBar) {
StatusBar.styleDefault();
}
});
});
My angular.js file
function StoreController() {
alert('Its working!');
}
So when I did this to test my function,
it says that the StoreController function is undefine... I hope someone could help!
You need to include the js file in your html below where you have included your app.js
<script src="js/angular.js"></script>
All the js scripts that you write, needs to included in the html to work, same goes with css.